From 360a181c1870f591f8ab5a2721ec97b1cda7b93d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 13 Oct 2024 00:15:33 +0200 Subject: [PATCH] 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. --- app/components/shared/avatar_component.rb | 2 +- spec/components/shared/avatar_component_spec.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/shared/avatar_component.rb b/app/components/shared/avatar_component.rb index 40ce21f9b..a8f310069 100644 --- a/app/components/shared/avatar_component.rb +++ b/app/components/shared/avatar_component.rb @@ -49,7 +49,7 @@ class Shared::AvatarComponent < ApplicationComponent width: size, height: size, role: "img", - "aria-label": "", + "aria-hidden": true, style: "background-color: #{background_color}", class: "initialjs-avatar #{options[:class]}".strip } diff --git a/spec/components/shared/avatar_component_spec.rb b/spec/components/shared/avatar_component_spec.rb index cc1d7b1e1..66a82c5c7 100644 --- a/spec/components/shared/avatar_component_spec.rb +++ b/spec/components/shared/avatar_component_spec.rb @@ -8,7 +8,7 @@ describe Shared::AvatarComponent do render_inline component 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 it "shows the initial letter of the name" do