From a95d26ca7e8be99038aa0255b84bd3fb653ce1d8 Mon Sep 17 00:00:00 2001
From: nikitaorliak-cengage <nikita.orliak@cengage.com>
Date: Fri, 25 Oct 2024 16:53:31 +0200
Subject: [PATCH] fix(CheckBox): Hide SVGs from screen readers by adding
 `aria-hidden="true"` to the `span` element that wraps the SVGs. (#1513)

Co-authored-by: Nikita Orliak <nikita.orliak@nixs.com>
---
 .changeset/a11y-checkbox-hide-svg-from-screen-readers.md  | 5 +++++
 .../src/components/Checkbox/Checkbox.test.js              | 8 ++++++++
 .../react-magma-dom/src/components/Checkbox/index.tsx     | 1 +
 .../IndeterminateCheckbox/IndeterminateCheckbox.test.js   | 8 ++++++++
 .../src/components/IndeterminateCheckbox/index.tsx        | 1 +
 5 files changed, 23 insertions(+)
 create mode 100644 .changeset/a11y-checkbox-hide-svg-from-screen-readers.md

diff --git a/.changeset/a11y-checkbox-hide-svg-from-screen-readers.md b/.changeset/a11y-checkbox-hide-svg-from-screen-readers.md
new file mode 100644
index 0000000000..af5f67cb4e
--- /dev/null
+++ b/.changeset/a11y-checkbox-hide-svg-from-screen-readers.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(CheckBox): Hide SVGs from screen readers by adding `aria-hidden="true"` to the `span` element that wraps the SVGs.
diff --git a/packages/react-magma-dom/src/components/Checkbox/Checkbox.test.js b/packages/react-magma-dom/src/components/Checkbox/Checkbox.test.js
index 4548c5507c..c7f0e73251 100644
--- a/packages/react-magma-dom/src/components/Checkbox/Checkbox.test.js
+++ b/packages/react-magma-dom/src/components/Checkbox/Checkbox.test.js
@@ -32,6 +32,14 @@ describe('Checkbox', () => {
     expect(checkbox).not.toHaveAttribute('autoFocus');
   });
 
+  it('should render the checkbox with aria-hidden', () => {
+    const { container } = render(<Checkbox />);
+
+    const span = container.querySelector('span');
+
+    expect(span).toHaveAttribute('aria-hidden', 'true');
+  });
+
   it('should render a checkbox that is checked on render with defaultChecked', () => {
     const label = 'test label';
     const { getByLabelText } = render(
diff --git a/packages/react-magma-dom/src/components/Checkbox/index.tsx b/packages/react-magma-dom/src/components/Checkbox/index.tsx
index 21e950630b..dfc3af564c 100644
--- a/packages/react-magma-dom/src/components/Checkbox/index.tsx
+++ b/packages/react-magma-dom/src/components/Checkbox/index.tsx
@@ -255,6 +255,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
               style={inputStyle}
               textPosition={textPosition}
               theme={theme}
+              aria-hidden="true"
             >
               {isChecked ? (
                 <CheckBoxIcon size={theme.iconSizes.medium} />
diff --git a/packages/react-magma-dom/src/components/IndeterminateCheckbox/IndeterminateCheckbox.test.js b/packages/react-magma-dom/src/components/IndeterminateCheckbox/IndeterminateCheckbox.test.js
index c8bfda0376..fba82d763b 100644
--- a/packages/react-magma-dom/src/components/IndeterminateCheckbox/IndeterminateCheckbox.test.js
+++ b/packages/react-magma-dom/src/components/IndeterminateCheckbox/IndeterminateCheckbox.test.js
@@ -33,6 +33,14 @@ describe('Indeterminate Checkbox', () => {
     expect(getByLabelText('Hello')).toBeInTheDocument();
   });
 
+  it('should render the indeterminate checkbox with aria-hidden', () => {
+    const { container } = render(<IndeterminateCheckbox />);
+
+    const span = container.querySelector('span');
+
+    expect(span).toHaveAttribute('aria-hidden', 'true');
+  });
+
   it('should give the checkbox an indeterminate value', () => {
     const label = 'test label';
     const { getByLabelText } = render(
diff --git a/packages/react-magma-dom/src/components/IndeterminateCheckbox/index.tsx b/packages/react-magma-dom/src/components/IndeterminateCheckbox/index.tsx
index 155a15e2ea..f84a87955b 100644
--- a/packages/react-magma-dom/src/components/IndeterminateCheckbox/index.tsx
+++ b/packages/react-magma-dom/src/components/IndeterminateCheckbox/index.tsx
@@ -171,6 +171,7 @@ export const IndeterminateCheckbox = React.forwardRef<
             isInverse={isInverse}
             style={inputStyle}
             theme={theme}
+            aria-hidden="true"
           >
             {isIndeterminate ? (
               <IndeterminateCheckBoxIcon