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: <a id="dashboard_action_2_execute" class="unchecked-link" rel="nofollow" data-method="post" href="/proposals/16-proposal-6-title/dashboard/actions/2/execute"> <span class="unchecked"></span> </a> 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 ```
This commit is contained in:
@@ -2,16 +2,20 @@
|
||||
<div class="action">
|
||||
<% 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 %>
|
||||
<span class="show-for-sr">
|
||||
<%= t("dashboard.recommended_actions.unexecute", name: proposed_action.title) %>
|
||||
</span>
|
||||
<span class="icon-check"></span>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= link_to execute_proposal_dashboard_action_path(proposal, proposed_action),
|
||||
id: "#{dom_id(proposed_action)}_execute",
|
||||
method: :post,
|
||||
class: "unchecked-link" do %>
|
||||
<span class="show-for-sr">
|
||||
<%= t("dashboard.recommended_actions.execute", name: proposed_action.title) %>
|
||||
</span>
|
||||
<span class="unchecked"></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user