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 ? (