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();
+
+ 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(
style={inputStyle}
textPosition={textPosition}
theme={theme}
+ aria-hidden="true"
>
{isChecked ? (
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();
+
+ 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 ? (