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:
Javi Martín
2024-10-13 00:15:33 +02:00
parent 815a4078d5
commit 360a181c18
2 changed files with 2 additions and 2 deletions

View File

@@ -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
} }

View File

@@ -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