Add ARIA labels to moderation checkboxes
This way it'll be easier for people using screen readers to know which element the checkbox is related to. Note that we're using the `aria-label` attribute because it makes testing with Capybara easier than using the `aria-labelledby` attribute. The only exception are the comments, since comments don't have a title and there isn't a proper label for them. In this case, we're using the title of the associated commentable as the label; we might change it in the future since there might be many comments for the same commentable.
This commit is contained in:
@@ -27,7 +27,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="text-center">
|
<td class="text-center">
|
||||||
<%= check_box_tag "budget_investment_ids[]", investment.id, nil, id: "#{dom_id(investment)}_check" %>
|
<%= check_box_tag "budget_investment_ids[]",
|
||||||
|
investment.id,
|
||||||
|
nil,
|
||||||
|
id: "#{dom_id(investment)}_check",
|
||||||
|
"aria-label": investment.title %>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|||||||
@@ -12,7 +12,9 @@
|
|||||||
<tr id="comment_<%= comment.id %>">
|
<tr id="comment_<%= comment.id %>">
|
||||||
<td>
|
<td>
|
||||||
<%= comment.commentable_type.constantize.model_name.human %> -
|
<%= comment.commentable_type.constantize.model_name.human %> -
|
||||||
<%= link_to comment.commentable.title, commentable_path(comment) %>
|
<%= link_to comment.commentable.title,
|
||||||
|
commentable_path(comment),
|
||||||
|
id: dom_id(comment, :title) %>
|
||||||
<br>
|
<br>
|
||||||
<span class="date"><%= l comment.updated_at.to_date %></span>
|
<span class="date"><%= l comment.updated_at.to_date %></span>
|
||||||
<span class="bullet"> • </span>
|
<span class="bullet"> • </span>
|
||||||
@@ -25,7 +27,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="text-center">
|
<td class="text-center">
|
||||||
<%= check_box_tag "comment_ids[]", comment.id, nil, id: "#{dom_id(comment)}_check" %>
|
<%= check_box_tag "comment_ids[]",
|
||||||
|
comment.id,
|
||||||
|
nil,
|
||||||
|
id: "#{dom_id(comment)}_check",
|
||||||
|
"aria-labelledby": dom_id(comment, :title) %>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|||||||
@@ -24,7 +24,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="text-center">
|
<td class="text-center">
|
||||||
<%= check_box_tag "debate_ids[]", debate.id, nil, id: "#{dom_id(debate)}_check" %>
|
<%= check_box_tag "debate_ids[]",
|
||||||
|
debate.id,
|
||||||
|
nil,
|
||||||
|
id: "#{dom_id(debate)}_check",
|
||||||
|
"aria-label": debate.title %>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|||||||
@@ -23,7 +23,8 @@
|
|||||||
<%= check_box_tag "proposal_notification_ids[]",
|
<%= check_box_tag "proposal_notification_ids[]",
|
||||||
proposal_notification.id,
|
proposal_notification.id,
|
||||||
nil,
|
nil,
|
||||||
id: "#{dom_id(proposal_notification)}_check" %>
|
id: "#{dom_id(proposal_notification)}_check",
|
||||||
|
"aria-label": proposal_notification.title %>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|||||||
@@ -24,7 +24,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="text-center">
|
<td class="text-center">
|
||||||
<%= check_box_tag "proposal_ids[]", proposal.id, nil, id: "#{dom_id(proposal)}_check" %>
|
<%= check_box_tag "proposal_ids[]",
|
||||||
|
proposal.id,
|
||||||
|
nil,
|
||||||
|
id: "#{dom_id(proposal)}_check",
|
||||||
|
"aria-label": proposal.title %>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|||||||
@@ -55,9 +55,7 @@ describe "Moderate budget investments" do
|
|||||||
visit moderation_budget_investments_path
|
visit moderation_budget_investments_path
|
||||||
click_link "All"
|
click_link "All"
|
||||||
|
|
||||||
within("#investment_#{investment.id}") do
|
check investment.title
|
||||||
check "budget_investment_#{investment.id}_check"
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
|
|
||||||
scenario "Hide the investment" do
|
scenario "Hide the investment" do
|
||||||
|
|||||||
@@ -49,9 +49,7 @@ describe "Moderate debates" do
|
|||||||
visit moderation_debates_path
|
visit moderation_debates_path
|
||||||
click_link "All"
|
click_link "All"
|
||||||
|
|
||||||
within("#debate_#{debate.id}") do
|
check debate.title
|
||||||
check "debate_#{debate.id}_check"
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
|
|
||||||
scenario "Hide the debate" do
|
scenario "Hide the debate" do
|
||||||
|
|||||||
@@ -57,9 +57,7 @@ describe "Moderate proposal notifications" do
|
|||||||
visit moderation_proposal_notifications_path
|
visit moderation_proposal_notifications_path
|
||||||
click_link "All"
|
click_link "All"
|
||||||
|
|
||||||
within("#proposal_notification_#{proposal_notification.id}") do
|
check proposal_notification.title
|
||||||
check "proposal_notification_#{proposal_notification.id}_check"
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
|
|
||||||
scenario "Hide the proposal" do
|
scenario "Hide the proposal" do
|
||||||
|
|||||||
@@ -48,9 +48,7 @@ describe "Moderate proposals" do
|
|||||||
visit moderation_proposals_path
|
visit moderation_proposals_path
|
||||||
click_link "All"
|
click_link "All"
|
||||||
|
|
||||||
within("#proposal_#{proposal.id}") do
|
check proposal.title
|
||||||
check "proposal_#{proposal.id}_check"
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
|
|
||||||
scenario "Hide the proposal" do
|
scenario "Hide the proposal" do
|
||||||
|
|||||||
Reference in New Issue
Block a user