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",
title: t("proposals.proposal.support_title"),
method: "post",
remote: true %>
remote: true,
"aria-label": support_aria_label%>
<% else %>
<div class="button button-support small expanded">
<%= t("proposals.proposal.support") %>

View File

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

View File

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

View File

@@ -408,6 +408,7 @@ es:
one: 1 Comentario
other: "%{count} Comentarios"
support: Apoyar
support_label: "Apoyar %{proposal}"
support_title: Apoyar esta propuesta
supports:
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 "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!"
end