Add proposal name to vote links aria-label

This way blind screen reader users will know which proposal they're
supporting. In a list of proposals, context might not be clear when a
link saying "Support" or "Support this proposal" is announced, but a
link saying "Support Create a monthly transport ticket" is less
ambiguous.

Just like we did with investments in commit de436e33a, we're keeping the
title attribute because when visiting a proposal page, the connection
between the "Support" link and the proposal is not as clear as it is in
the proposals index page, so it might not be clear what you're
supporting.
This commit is contained in:
Javi Martín
2021-09-29 03:07:16 +02:00
parent 86ad2df46d
commit 4fd99e2d30
5 changed files with 9 additions and 1 deletions

View File

@@ -11,7 +11,8 @@
class: "button button-support small expanded", class: "button button-support small expanded",
title: t("proposals.proposal.support_title"), title: t("proposals.proposal.support_title"),
method: "post", method: "post",
remote: true %> remote: true,
"aria-label": support_aria_label%>
<% else %> <% else %>
<div class="button button-support small expanded"> <div class="button button-support small expanded">
<%= t("proposals.proposal.support") %> <%= t("proposals.proposal.support") %>

View File

@@ -21,6 +21,10 @@ class Proposals::VotesComponent < ApplicationComponent
proposal.votable_by?(current_user) proposal.votable_by?(current_user)
end end
def support_aria_label
t("proposals.proposal.support_label", proposal: proposal.title)
end
def organization? def organization?
current_user&.organization? current_user&.organization?
end end

View File

@@ -408,6 +408,7 @@ en:
other: "%{count} comments" other: "%{count} comments"
zero: No comments zero: No comments
support: Support support: Support
support_label: "Support %{proposal}"
support_title: Support this proposal support_title: Support this proposal
supports: supports:
one: 1 support one: 1 support

View File

@@ -408,6 +408,7 @@ es:
one: 1 Comentario one: 1 Comentario
other: "%{count} Comentarios" other: "%{count} Comentarios"
support: Apoyar support: Apoyar
support_label: "Apoyar %{proposal}"
support_title: Apoyar esta propuesta support_title: Apoyar esta propuesta
supports: supports:
zero: Sin apoyos zero: Sin apoyos

View File

@@ -21,6 +21,7 @@ describe Proposals::VotesComponent do
expect(page).to have_link count: 1 expect(page).to have_link count: 1
expect(page).to have_link "Support", title: "Support this proposal" expect(page).to have_link "Support", title: "Support this proposal"
expect(page).to have_link "Support Create a monthly transport ticket"
expect(page).not_to have_content "You have already supported this proposal. Share it!" expect(page).not_to have_content "You have already supported this proposal. Share it!"
end end