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>
|
||||
</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 %>
|
||||
|
||||
@@ -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"> • </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 %>
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user