From 4e08f3f14705392bd070b5789664e05e2a3cb1fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 26 Feb 2025 09:21:35 +0100 Subject: [PATCH] Add a text to the links to execute dashboard actions People using screen readers had no idea what these links were about (not that the icons are very usable for people seeing them either... but that's a different topic). Axe was reporting this error: ``` link-name: Links must have discernible text (serious) https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI The following 1 node violate this rule: Selector: #dashboard_action_2_execute HTML: Fix all of the following: - Element is in tab order and does not have accessible text Fix any of the following: - Element does not have text that is visible to screen readers - aria-label attribute does not exist or is empty - aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty - Element has no title attribute ``` --- app/views/dashboard/_proposed_action.html.erb | 8 +++-- config/locales/en/general.yml | 2 ++ config/locales/es/general.yml | 2 ++ spec/system/dashboard/dashboard_spec.rb | 33 ++++++++++++------- 4 files changed, 32 insertions(+), 13 deletions(-) diff --git a/app/views/dashboard/_proposed_action.html.erb b/app/views/dashboard/_proposed_action.html.erb index 082ddf0ed..0a593ad8f 100644 --- a/app/views/dashboard/_proposed_action.html.erb +++ b/app/views/dashboard/_proposed_action.html.erb @@ -2,16 +2,20 @@
<% if proposed_action.proposals.where(id: proposal.id).any? %> <%= link_to unexecute_proposal_dashboard_action_path(proposal, proposed_action), - id: "#{dom_id(proposed_action)}_unexecute", method: :post, class: "checked-link" do %> + + <%= t("dashboard.recommended_actions.unexecute", name: proposed_action.title) %> + <% end %> <% else %> <%= link_to execute_proposal_dashboard_action_path(proposal, proposed_action), - id: "#{dom_id(proposed_action)}_execute", method: :post, class: "unchecked-link" do %> + + <%= t("dashboard.recommended_actions.execute", name: proposed_action.title) %> + <% end %> <% end %> diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml index 4ee75c137..163091a05 100644 --- a/config/locales/en/general.yml +++ b/config/locales/en/general.yml @@ -475,6 +475,8 @@ en: see_proposed_actions: Check out recommended actions hide_proposed_actions: Hide recommended actions pending_title: Pending + execute: "Mark %{name} as done" + unexecute: "Unmark %{name} as done" show_description: Show description without_pending_actions: No recommended actions pending done_title: Done diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml index 458f437a8..1b803c460 100644 --- a/config/locales/es/general.yml +++ b/config/locales/es/general.yml @@ -475,6 +475,8 @@ es: see_proposed_actions: Ver todas las acciones recomendadas hide_proposed_actions: Ocultar acciones recomendadas pending_title: Pendientes + execute: "Marcar la acción %{name} como realizada" + unexecute: "Desmarcar la acción %{name} como realizada" show_description: Mostrar descripción without_pending_actions: No hay acciones recomendadas pendientes done_title: Realizadas diff --git a/spec/system/dashboard/dashboard_spec.rb b/spec/system/dashboard/dashboard_spec.rb index 1550361de..fc2c6416c 100644 --- a/spec/system/dashboard/dashboard_spec.rb +++ b/spec/system/dashboard/dashboard_spec.rb @@ -92,31 +92,42 @@ describe "Proposal's dashboard" do end scenario "Dashboard progress display proposed_action pending on his section" do - action = create(:dashboard_action, :proposed_action, :active) + create(:dashboard_action, :proposed_action, :active, title: "Expand!") visit progress_proposal_dashboard_path(proposal) within "#proposed_actions_pending" do - expect(page).to have_content action.title + expect(page).to have_content "Expand!" end - find(:css, "#dashboard_action_#{action.id}_execute").click + click_link "Mark Expand! as done" within "#proposed_actions_done" do - expect(page).to have_content action.title + expect(page).to have_content "Expand!" end - expect(page).not_to have_css "#dashboard_action_#{action.id}_execute" + + expect(page).not_to have_link "Mark Expand! as done" + expect(page).to have_link "Unmark Expand! as done" end scenario "Dashboard progress can unexecute proposed action" do - action = create(:dashboard_action, :proposed_action, :active) + action = create(:dashboard_action, :proposed_action, :active, title: "Reinforce!") create(:dashboard_executed_action, proposal: proposal, action: action) visit progress_proposal_dashboard_path(proposal) - expect(page).to have_content(action.title) - find(:css, "#dashboard_action_#{action.id}_unexecute").click - expect(page).to have_css "#dashboard_action_#{action.id}_execute" + within "#proposed_actions_done" do + expect(page).to have_content "Reinforce!" + end + + click_link "Unmark Reinforce! as done" + + within "#proposed_actions_pending" do + expect(page).to have_content "Reinforce!" + end + + expect(page).not_to have_link "Unmark Reinforce! as done" + expect(page).to have_link "Mark Reinforce! as done" end scenario "Dashboard progress dont show proposed actions with published_proposal: true" do @@ -450,10 +461,10 @@ describe "Proposal's dashboard" do end scenario "On recommended actions section display proposed_action done on his section" do - action = create(:dashboard_action, :proposed_action, :active) + action = create(:dashboard_action, :proposed_action, :active, title: "Make progress") visit recommended_actions_proposal_dashboard_path(proposal.to_param) - find(:css, "#dashboard_action_#{action.id}_execute").click + click_link "Mark Make progress as done" within "#proposed_actions_done" do expect(page).to have_content(action.title)