From b7e9d1118e3bac73be34b807612dde6717e35588 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 10 Oct 2024 23:03:58 +0200 Subject: [PATCH] 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. --- .../moderation/budgets/investments/index.html.erb | 6 +++++- app/views/moderation/comments/index.html.erb | 10 ++++++++-- app/views/moderation/debates/index.html.erb | 6 +++++- .../moderation/proposal_notifications/index.html.erb | 3 ++- app/views/moderation/proposals/index.html.erb | 6 +++++- spec/system/moderation/budget_investments_spec.rb | 4 +--- spec/system/moderation/debates_spec.rb | 4 +--- spec/system/moderation/proposal_notifications_spec.rb | 4 +--- spec/system/moderation/proposals_spec.rb | 4 +--- 9 files changed, 29 insertions(+), 18 deletions(-) diff --git a/app/views/moderation/budgets/investments/index.html.erb b/app/views/moderation/budgets/investments/index.html.erb index 4d81e5b98..cef7b9426 100644 --- a/app/views/moderation/budgets/investments/index.html.erb +++ b/app/views/moderation/budgets/investments/index.html.erb @@ -27,7 +27,11 @@ - <%= 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 %> <% end %> diff --git a/app/views/moderation/comments/index.html.erb b/app/views/moderation/comments/index.html.erb index 2381ce886..d6586313e 100644 --- a/app/views/moderation/comments/index.html.erb +++ b/app/views/moderation/comments/index.html.erb @@ -12,7 +12,9 @@ <%= 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) %>
<%= l comment.updated_at.to_date %>  •  @@ -25,7 +27,11 @@ - <%= 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) %> <% end %> diff --git a/app/views/moderation/debates/index.html.erb b/app/views/moderation/debates/index.html.erb index a3f666764..2691c3ba4 100644 --- a/app/views/moderation/debates/index.html.erb +++ b/app/views/moderation/debates/index.html.erb @@ -24,7 +24,11 @@ - <%= 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 %> <% end %> diff --git a/app/views/moderation/proposal_notifications/index.html.erb b/app/views/moderation/proposal_notifications/index.html.erb index 2c8a71ac6..39e1addaf 100644 --- a/app/views/moderation/proposal_notifications/index.html.erb +++ b/app/views/moderation/proposal_notifications/index.html.erb @@ -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 %> <% end %> diff --git a/app/views/moderation/proposals/index.html.erb b/app/views/moderation/proposals/index.html.erb index 387ab60d8..e284d75bc 100644 --- a/app/views/moderation/proposals/index.html.erb +++ b/app/views/moderation/proposals/index.html.erb @@ -24,7 +24,11 @@ - <%= 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 %> <% end %> diff --git a/spec/system/moderation/budget_investments_spec.rb b/spec/system/moderation/budget_investments_spec.rb index ad1bb0460..70cec4304 100644 --- a/spec/system/moderation/budget_investments_spec.rb +++ b/spec/system/moderation/budget_investments_spec.rb @@ -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 diff --git a/spec/system/moderation/debates_spec.rb b/spec/system/moderation/debates_spec.rb index df8ecf168..c9db5c9a6 100644 --- a/spec/system/moderation/debates_spec.rb +++ b/spec/system/moderation/debates_spec.rb @@ -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 diff --git a/spec/system/moderation/proposal_notifications_spec.rb b/spec/system/moderation/proposal_notifications_spec.rb index fec1a74fe..ccbff02c0 100644 --- a/spec/system/moderation/proposal_notifications_spec.rb +++ b/spec/system/moderation/proposal_notifications_spec.rb @@ -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 diff --git a/spec/system/moderation/proposals_spec.rb b/spec/system/moderation/proposals_spec.rb index 6fb8ce02d..0687e1dfc 100644 --- a/spec/system/moderation/proposals_spec.rb +++ b/spec/system/moderation/proposals_spec.rb @@ -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