From 08deb434d002fb1a96ca4e6838dbcc20aa1df3b6 Mon Sep 17 00:00:00 2001
From: nikitaorliak-cengage <nikita.orliak@cengage.com>
Date: Fri, 25 Oct 2024 17:08:06 +0200
Subject: [PATCH] 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 <nikita.orliak@nixs.com>
---
 .changeset/a11y-list-hide-icons-from-assistive-tech.md    | 5 +++++
 packages/react-magma-dom/src/components/List/List.test.js | 4 ++++
 packages/react-magma-dom/src/components/List/ListItem.tsx | 1 +
 3 files changed, 10 insertions(+)
 create mode 100644 .changeset/a11y-list-hide-icons-from-assistive-tech.md

diff --git a/.changeset/a11y-list-hide-icons-from-assistive-tech.md b/.changeset/a11y-list-hide-icons-from-assistive-tech.md
new file mode 100644
index 000000000..78db391ae
--- /dev/null
+++ 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
index 728bb8f5f..8787bf265 100644
--- 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
index 47541d982..c3df92582 100644
--- 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>