Add investment name in vote link aria-label

This way blind screen reader users will know which project they're
supporting. In a list of investments, context might not be clear when a
link saying "Support" or "Support this project" is announced, but a link
saying "Support Renovate sidewalks in Main Street" is less ambiguous.
This commit is contained in:
Javi Martín
2021-06-12 15:24:57 +02:00
parent da11c0d7ba
commit 42ffc62d12
5 changed files with 11 additions and 2 deletions

View File

@@ -16,7 +16,8 @@
title: t("budgets.investments.investment.support_title"),
method: "post",
remote: !display_support_alert?,
data: ({ confirm: confirm_vote_message } if display_support_alert?) %>
data: ({ confirm: confirm_vote_message } if display_support_alert?),
"aria-label": support_aria_label %>
<% else %>
<div class="button button-support small expanded">
<%= t("budgets.investments.investment.give_support") %>

View File

@@ -32,4 +32,8 @@ class Budgets::Investments::VotesComponent < ApplicationComponent
def confirm_vote_message
t("budgets.investments.investment.confirm_group", count: investment.group.max_votable_headings)
end
def support_aria_label
t("budgets.investments.investment.support_label", investment: investment.title)
end
end

View File

@@ -158,6 +158,7 @@ en:
already_added: You have already added this investment project
already_supported: You have already supported this investment project. Share it!
support_title: Support this project
support_label: "Support %{investment}"
confirm_group:
one: "You can only support investments in %{count} district. If you continue you cannot change the election of your district. Are you sure?"
other: "You can only support investments in %{count} districts. If you continue you cannot change the election of your district. Are you sure?"

View File

@@ -158,6 +158,7 @@ es:
already_added: Ya has añadido este proyecto de gasto
already_supported: Ya has apoyado este proyecto de gasto. ¡Compártelo!
support_title: Apoyar este proyecto
support_label: "Apoyar %{investment}"
confirm_group:
one: "Sólo puedes apoyar proyectos en %{count} distrito. Si sigues adelante no podrás cambiar la elección de este distrito. ¿Estás seguro/a?"
other: "Sólo puedes apoyar proyectos en %{count} distritos. Si sigues adelante no podrás cambiar la elección de este distrito. ¿Estás seguro/a?"

View File

@@ -3,7 +3,7 @@ require "rails_helper"
describe Budgets::Investments::VotesComponent, type: :component do
describe "vote link" do
context "when investment shows votes" do
let(:investment) { create(:budget_investment) }
let(:investment) { create(:budget_investment, title: "Renovate sidewalks in Main Street") }
let(:component) do
Budgets::Investments::VotesComponent.new(investment, investment_votes: [], vote_url: "/")
end
@@ -15,7 +15,9 @@ describe Budgets::Investments::VotesComponent, type: :component do
render_inline component
expect(page).to have_link count: 1
expect(page).to have_link "Support"
expect(page).to have_link "Support Renovate sidewalks in Main Street"
end
it "does not display link to support the investment to unidentified users" do