Use aria-label in admin table actions

This way screen reader users will know which record they're going to
access when focusing on a link to a certain action. Otherwise they'd
hear something like "Edit, link", and they wouldn't know which record
they'll end up editing if they follow the link.
This commit is contained in:
Javi Martín
2021-08-17 22:29:11 +02:00
parent 6a2c01b119
commit 2b4b2f3442
13 changed files with 189 additions and 5 deletions

View File

@@ -6,4 +6,58 @@ describe Admin::ActionComponent do
expect(page).to have_css "a.edit-link"
end
describe "aria-label attribute" do
it "is not rendered by default" do
record = double(human_name: "Stay home")
render_inline Admin::ActionComponent.new(:edit, record, path: "/")
expect(page).to have_link count: 1
expect(page).not_to have_css "[aria-label]"
end
it "is not rendered when aria-label is nil" do
render_inline Admin::ActionComponent.new(:edit, double, path: "/", "aria-label": nil)
expect(page).to have_link count: 1
expect(page).not_to have_css "[aria-label]"
end
it "renders with the given value" do
render_inline Admin::ActionComponent.new(:edit, double, path: "/", "aria-label": "Modify")
expect(page).to have_link count: 1
expect(page).to have_css "[aria-label='Modify']"
end
context "when aria-label is true" do
it "includes the action and the human_name of the record" do
record = double(human_name: "Stay home")
render_inline Admin::ActionComponent.new(:edit, record, path: "/", "aria-label": true)
expect(page).to have_link count: 1
expect(page).to have_css "a[aria-label='Edit Stay home']", exact_text: "Edit"
end
it "uses the to_s method when there's no human_name" do
record = double(to_s: "do_not_go_out")
render_inline Admin::ActionComponent.new(:edit, record, path: "/", "aria-label": true)
expect(page).to have_link count: 1
expect(page).to have_css "a[aria-label='Edit Do not go out']", exact_text: "Edit"
end
it "uses the human_name when there are both human_name and to_s" do
record = double(human_name: "Stay home", to_s: "do_not_go_out")
render_inline Admin::ActionComponent.new(:edit, record, path: "/", "aria-label": true)
expect(page).to have_link count: 1
expect(page).to have_css "a[aria-label='Edit Stay home']", exact_text: "Edit"
end
end
end
end