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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user