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:
Javi Martín
2024-10-10 23:03:58 +02:00
parent 8213f23629
commit b7e9d1118e
9 changed files with 29 additions and 18 deletions

View File

@@ -27,7 +27,11 @@
</div>
</td>
<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>
</tr>
<% end %>

View File

@@ -12,7 +12,9 @@
<tr id="comment_<%= comment.id %>">
<td>
<%= 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>
<span class="date"><%= l comment.updated_at.to_date %></span>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
@@ -25,7 +27,11 @@
</div>
</td>
<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>
</tr>
<% end %>

View File

@@ -24,7 +24,11 @@
</div>
</td>
<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>
</tr>
<% end %>

View File

@@ -23,7 +23,8 @@
<%= check_box_tag "proposal_notification_ids[]",
proposal_notification.id,
nil,
id: "#{dom_id(proposal_notification)}_check" %>
id: "#{dom_id(proposal_notification)}_check",
"aria-label": proposal_notification.title %>
</td>
</tr>
<% end %>

View File

@@ -24,7 +24,11 @@
</div>
</td>
<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>
</tr>
<% end %>

View File

@@ -55,9 +55,7 @@ describe "Moderate budget investments" do
visit moderation_budget_investments_path
click_link "All"
within("#investment_#{investment.id}") do
check "budget_investment_#{investment.id}_check"
end
check investment.title
end
scenario "Hide the investment" do

View File

@@ -49,9 +49,7 @@ describe "Moderate debates" do
visit moderation_debates_path
click_link "All"
within("#debate_#{debate.id}") do
check "debate_#{debate.id}_check"
end
check debate.title
end
scenario "Hide the debate" do

View File

@@ -57,9 +57,7 @@ describe "Moderate proposal notifications" do
visit moderation_proposal_notifications_path
click_link "All"
within("#proposal_notification_#{proposal_notification.id}") do
check "proposal_notification_#{proposal_notification.id}_check"
end
check proposal_notification.title
end
scenario "Hide the proposal" do

View File

@@ -48,9 +48,7 @@ describe "Moderate proposals" do
visit moderation_proposals_path
click_link "All"
within("#proposal_#{proposal.id}") do
check "proposal_#{proposal.id}_check"
end
check proposal.title
end
scenario "Hide the proposal" do