Use aria-hidden when rendering SVG avatars
It looks like not all screen readers identify SVG images with empty aria
labels as a decorative image, as reported by the Axe accessibility
engine.
So we're using `aria-hidden` instead, since we don't want the text of
the SVG to be read by screen readers. We're using `aria-hidden` instead
of the `presentation` role for the reasons mentioned in commit
35659d441.
This commit is contained in:
@@ -49,7 +49,7 @@ class Shared::AvatarComponent < ApplicationComponent
|
|||||||
width: size,
|
width: size,
|
||||||
height: size,
|
height: size,
|
||||||
role: "img",
|
role: "img",
|
||||||
"aria-label": "",
|
"aria-hidden": true,
|
||||||
style: "background-color: #{background_color}",
|
style: "background-color: #{background_color}",
|
||||||
class: "initialjs-avatar #{options[:class]}".strip
|
class: "initialjs-avatar #{options[:class]}".strip
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ describe Shared::AvatarComponent do
|
|||||||
render_inline component
|
render_inline component
|
||||||
|
|
||||||
expect(page).to have_css "svg", count: 1
|
expect(page).to have_css "svg", count: 1
|
||||||
expect(page).to have_css "svg[role='img'][aria-label='']"
|
expect(page).to have_css "svg[role='img'][aria-hidden='true']"
|
||||||
end
|
end
|
||||||
|
|
||||||
it "shows the initial letter of the name" do
|
it "shows the initial letter of the name" do
|
||||||
|
|||||||
Reference in New Issue
Block a user