fix(List): Hide SVGs from assistive tech by adding `aria-hidden="true…

…"` to the `span` element that wraps the SVGs. (#1516) Co-authored-by: Nikita Orliak <[email protected]>
cengage · Oct 25, 2024 · 08deb43 · 08deb43 · github-actions · Oct 25, 2024
1 parent 2a6ba19
commit 08deb43
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/.changeset/a11y-list-hide-icons-from-assistive-tech.md b/.changeset/a11y-list-hide-icons-from-assistive-tech.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(List): Hide SVGs from assistive tech by adding `aria-hidden="true"` to the `span` element that wraps the SVGs.
diff --git a/packages/react-magma-dom/src/components/List/List.test.js b/packages/react-magma-dom/src/components/List/List.test.js
@@ -53,6 +53,10 @@ describe('List', () => {
       'borderRadius',
       '50%'
     );
+    expect(container.querySelector('span')).toHaveAttribute(
+      'aria-hidden',
+      'true'
+    );
   });
 
   it('should render a list item with a small icon', () => {

diff --git a/packages/react-magma-dom/src/components/List/ListItem.tsx b/packages/react-magma-dom/src/components/List/ListItem.tsx
@@ -96,6 +96,7 @@ export const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(
               }
               iconColor={theme.colors[iconColor] || theme.colors.neutral100}
               theme={theme}
+              aria-hidden="true"
             >
               {icon}
             </StyledIcon>