Add aria-labels to user investment actions
This way it'll be easier for people using screen readers to know which link/button they're about to click. Note that, at least for now, we aren't reusing the code en `Admin::ActionComponent`. We might do so in the future if we implement similar code in more parts of the public area.
This commit is contained in:
@@ -11,6 +11,7 @@ class Users::BudgetInvestmentTableActionsComponent < ApplicationComponent
|
|||||||
def edit_link
|
def edit_link
|
||||||
link_to t("shared.edit"),
|
link_to t("shared.edit"),
|
||||||
edit_budget_investment_path(investment.budget, investment),
|
edit_budget_investment_path(investment.budget, investment),
|
||||||
|
"aria-label": action_label(t("shared.edit")),
|
||||||
class: "button hollow"
|
class: "button hollow"
|
||||||
end
|
end
|
||||||
|
|
||||||
@@ -18,7 +19,12 @@ class Users::BudgetInvestmentTableActionsComponent < ApplicationComponent
|
|||||||
button_to t("shared.delete"),
|
button_to t("shared.delete"),
|
||||||
budget_investment_path(investment.budget, investment),
|
budget_investment_path(investment.budget, investment),
|
||||||
method: :delete,
|
method: :delete,
|
||||||
|
"aria-label": action_label(t("shared.delete")),
|
||||||
class: "button hollow alert",
|
class: "button hollow alert",
|
||||||
data: { confirm: t("users.show.delete_alert") }
|
data: { confirm: t("users.show.delete_alert") }
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def action_label(action_text)
|
||||||
|
t("shared.actions.label", action: action_text, name: investment.title)
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|||||||
@@ -644,6 +644,8 @@ en:
|
|||||||
show:
|
show:
|
||||||
back: "Go back to my content"
|
back: "Go back to my content"
|
||||||
shared:
|
shared:
|
||||||
|
actions:
|
||||||
|
label: "%{action} %{name}"
|
||||||
edit: "Edit"
|
edit: "Edit"
|
||||||
filter: "Filter"
|
filter: "Filter"
|
||||||
save: "Save"
|
save: "Save"
|
||||||
|
|||||||
@@ -644,6 +644,8 @@ es:
|
|||||||
show:
|
show:
|
||||||
back: "Volver a mi contenido"
|
back: "Volver a mi contenido"
|
||||||
shared:
|
shared:
|
||||||
|
actions:
|
||||||
|
label: "%{action} %{name}"
|
||||||
edit: "Editar"
|
edit: "Editar"
|
||||||
filter: "Filtrar"
|
filter: "Filtrar"
|
||||||
save: "Guardar"
|
save: "Guardar"
|
||||||
|
|||||||
@@ -0,0 +1,31 @@
|
|||||||
|
require "rails_helper"
|
||||||
|
|
||||||
|
describe Users::BudgetInvestmentTableActionsComponent do
|
||||||
|
let(:user) { create(:user, :level_two) }
|
||||||
|
let(:budget) { create(:budget, :accepting) }
|
||||||
|
let(:investment) { create(:budget_investment, budget: budget, author: user, title: "User investment") }
|
||||||
|
|
||||||
|
describe "#edit_link" do
|
||||||
|
it "generates an aria-label attribute" do
|
||||||
|
sign_in(user)
|
||||||
|
|
||||||
|
render_inline Users::BudgetInvestmentTableActionsComponent.new(investment)
|
||||||
|
|
||||||
|
expect(page).to have_link count: 1
|
||||||
|
expect(page).to have_link "Edit"
|
||||||
|
expect(page).to have_css "a[aria-label='Edit User investment']"
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
describe "#destroy_button" do
|
||||||
|
it "generates an aria-label attribute" do
|
||||||
|
sign_in(user)
|
||||||
|
|
||||||
|
render_inline Users::BudgetInvestmentTableActionsComponent.new(investment)
|
||||||
|
|
||||||
|
expect(page).to have_button count: 1
|
||||||
|
expect(page).to have_button "Delete"
|
||||||
|
expect(page).to have_css "button[aria-label='Delete User investment']"
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
Reference in New Issue
Block a user