From 4fd99e2d302a0df485d73ea514f3003cfc351b7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 29 Sep 2021 03:07:16 +0200
Subject: [PATCH] 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.
---
 app/components/proposals/votes_component.html.erb | 3 ++-
 app/components/proposals/votes_component.rb       | 4 ++++
 config/locales/en/general.yml                     | 1 +
 config/locales/es/general.yml                     | 1 +
 spec/components/proposals/votes_component_spec.rb | 1 +
 5 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/components/proposals/votes_component.html.erb b/app/components/proposals/votes_component.html.erb
index 3ee2553ba..e6302e481 100644
--- a/app/components/proposals/votes_component.html.erb
+++ b/app/components/proposals/votes_component.html.erb
@@ -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") %>
diff --git a/app/components/proposals/votes_component.rb b/app/components/proposals/votes_component.rb
index bae9cf50c..6fbf7d351 100644
--- a/app/components/proposals/votes_component.rb
+++ b/app/components/proposals/votes_component.rb
@@ -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
diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml
index c6f99722b..260bd56bd 100644
--- a/config/locales/en/general.yml
+++ b/config/locales/en/general.yml
@@ -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
diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml
index aaae524ca..661f1da17 100644
--- a/config/locales/es/general.yml
+++ b/config/locales/es/general.yml
@@ -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
diff --git a/spec/components/proposals/votes_component_spec.rb b/spec/components/proposals/votes_component_spec.rb
index b4837318d..51b7a769e 100644
--- a/spec/components/proposals/votes_component_spec.rb
+++ b/spec/components/proposals/votes_component_spec.rb
@@ -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