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 <[email protected]>

.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.

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(

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} />

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(

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