[@mantine/core] Switch: Use role="switch" for better accessibility (#…

…5746) Co-authored-by: Riley Pearce <[email protected]>
mantinedev · Feb 26, 2024 · da79556 · da79556
1 parent ec4fcf7
commit da79556
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 49 deletions.
diff --git a/packages/@mantine-tests/core/src/index.ts b/packages/@mantine-tests/core/src/index.ts
@@ -1,7 +1,7 @@
 import userEvent from '@testing-library/user-event';
 import { axe } from './axe';
 import { itConnectsLabelAndInput } from './inputs/it-connects-label-and-input';
-import { itHandlesCheckboxState } from './inputs/it-handles-checkbox-state';
+import { itHandlesSwitchCheckboxState } from './inputs/it-handles-switch-checkbox-state';
 import { itSupportsInputAsterisk } from './inputs/it-supports-input-asterisk';
 import { itSupportsInputContainer } from './inputs/it-supports-input-container';
 import { itSupportsInputProps } from './inputs/it-supports-input-props';
@@ -73,7 +73,7 @@ export const tests = {
   itSupportsInputAsterisk,
   itSupportsInputWrapperOrder,
   itSupportsInputWrapperElements,
-  itHandlesCheckboxState,
+  itHandlesSwitchCheckboxState,
   itConnectsLabelAndInput,
 
   itSupportsSystemProps,

diff --git a/packages/@mantine-tests/core/src/inputs/it-handles-checkbox-state.tsx b/packages/@mantine-tests/core/src/inputs/it-handles-checkbox-state.tsx
diff --git a/packages/@mantine-tests/core/src/inputs/it-handles-switch-checkbox-state.tsx b/packages/@mantine-tests/core/src/inputs/it-handles-switch-checkbox-state.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render } from '../render';
+
+interface Options<Props = any> {
+  component: React.ComponentType<Props>;
+  props: Props;
+}
+
+export function itHandlesSwitchCheckboxState<Props>(
+  options: Options<Props>,
+  name = 'handles switch checkbox state'
+) {
+  describe(name, () => {
+    it('correctly handles controlled switch checkbox state', async () => {
+      const spy = jest.fn();
+      render(<options.component {...options.props} checked={false} onChange={spy} />);
+      expect(screen.getByRole('switch')).not.toBeChecked();
+      await userEvent.click(screen.getByRole('switch'));
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(screen.getByRole('switch')).not.toBeChecked();
+    });
+
+    it('correctly handles uncontrolled switch checkbox state', async () => {
+      render(<options.component {...options.props} defaultChecked={false} />);
+      expect(screen.getByRole('switch')).not.toBeChecked();
+      await userEvent.click(screen.getByRole('switch'));
+      expect(screen.getByRole('switch')).toBeChecked();
+    });
+  });
+}
diff --git a/packages/@mantine/core/src/components/InlineInput/InlineInput.tsx b/packages/@mantine/core/src/components/InlineInput/InlineInput.tsx
@@ -36,6 +36,8 @@ export interface InlineInputProps
   error: React.ReactNode;
   size: MantineSize | (string & {}) | undefined;
   labelPosition?: 'left' | 'right';
+  bodyElement?: any;
+  labelElement?: any;
 }
 
 export type InlineInputFactory = Factory<{
@@ -60,6 +62,8 @@ export const InlineInput = forwardRef<HTMLDivElement, InlineInputProps>(
       error,
       size,
       labelPosition = 'left',
+      bodyElement = 'div',
+      labelElement = 'label',
       variant,
       style,
       vars,
@@ -92,14 +96,23 @@ export const InlineInput = forwardRef<HTMLDivElement, InlineInputProps>(
         size={size}
         {...others}
       >
-        <div {...getStyles('body')}>
+        <Box
+          component={bodyElement}
+          htmlFor={bodyElement === 'label' ? id : undefined}
+          {...getStyles('body')}
+        >
           {children}
 
           <div {...getStyles('labelWrapper')} data-disabled={disabled || undefined}>
             {label && (
-              <label {...getStyles('label')} data-disabled={disabled || undefined} htmlFor={id}>
+              <Box
+                component={labelElement}
+                htmlFor={labelElement === 'label' ? id : undefined}
+                {...getStyles('label')}
+                data-disabled={disabled || undefined}
+              >
                 {label}
-              </label>
+              </Box>
             )}
 
             {description && (
@@ -114,7 +127,7 @@ export const InlineInput = forwardRef<HTMLDivElement, InlineInputProps>(
               </Input.Error>
             )}
           </div>
-        </div>
+        </Box>
       </Box>
     );
   }

diff --git a/packages/@mantine/core/src/components/Switch/Switch.test.tsx b/packages/@mantine/core/src/components/Switch/Switch.test.tsx
@@ -12,7 +12,7 @@ const defaultProps: SwitchProps = {
 describe('@mantine/core/Switch', () => {
   tests.axe([<Switch label="test-label" />, <Switch aria-label="test-label" />]);
   tests.itSupportsFocusEvents({ component: Switch, props: defaultProps, selector: 'input' });
-  tests.itHandlesCheckboxState({ component: Switch, props: defaultProps });
+  tests.itHandlesSwitchCheckboxState({ component: Switch, props: defaultProps });
   tests.itConnectsLabelAndInput({ component: Switch, props: defaultProps });
   tests.itSupportsSystemProps<SwitchProps, SwitchStylesNames>({
     component: Switch,
@@ -59,7 +59,7 @@ describe('@mantine/core/Switch', () => {
 
   it('sets disabled attribute on input based on disabled prop', () => {
     render(<Switch disabled />);
-    expect(screen.getByRole('checkbox')).toBeDisabled();
+    expect(screen.getByRole('switch')).toBeDisabled();
   });
 
   it('exposes SwitchGroup component', () => {

diff --git a/packages/@mantine/core/src/components/Switch/Switch.tsx b/packages/@mantine/core/src/components/Switch/Switch.tsx
@@ -187,6 +187,8 @@ export const Switch = factory<SwitchFactory>((_props, ref) => {
       description={description}
       error={error}
       disabled={disabled}
+      bodyElement="label"
+      labelElement="span"
       classNames={classNames}
       styles={styles}
       unstyled={unstyled}
@@ -208,12 +210,12 @@ export const Switch = factory<SwitchFactory>((_props, ref) => {
         id={uuid}
         ref={ref}
         type="checkbox"
+        role="switch"
         {...getStyles('input')}
       />
 
       <Box
-        component="label"
-        htmlFor={uuid}
+        aria-hidden="true"
         mod={{ error, 'label-position': labelPosition }}
         {...getStyles('track')}
       >

diff --git a/packages/@mantine/core/src/components/Switch/SwitchGroup/SwitchGroup.test.tsx b/packages/@mantine/core/src/components/Switch/SwitchGroup/SwitchGroup.test.tsx
@@ -39,18 +39,18 @@ describe('@mantine/core/SwitchGroup', () => {
 
   it('supports uncontrolled state', async () => {
     render(<SwitchGroup {...defaultProps} defaultValue={['test-value-1']} />);
-    expect(screen.getAllByRole('checkbox')[0]).toBeChecked();
-    await userEvent.click(screen.getAllByRole('checkbox')[1]);
-    expect(screen.getAllByRole('checkbox')[1]).toBeChecked();
+    expect(screen.getAllByRole('switch')[0]).toBeChecked();
+    await userEvent.click(screen.getAllByRole('switch')[1]);
+    expect(screen.getAllByRole('switch')[1]).toBeChecked();
   });
 
   it('supports controlled state', async () => {
     const spy = jest.fn();
     render(<SwitchGroup {...defaultProps} value={['test-value-2']} onChange={spy} />);
-    expect(screen.getAllByRole('checkbox')[1]).toBeChecked();
-    await userEvent.click(screen.getAllByRole('checkbox')[0]);
-    expect(screen.getAllByRole('checkbox')[1]).toBeChecked();
-    expect(screen.getAllByRole('checkbox')[0]).not.toBeChecked();
+    expect(screen.getAllByRole('switch')[1]).toBeChecked();
+    await userEvent.click(screen.getAllByRole('switch')[0]);
+    expect(screen.getAllByRole('switch')[1]).toBeChecked();
+    expect(screen.getAllByRole('switch')[0]).not.toBeChecked();
     expect(spy).toHaveBeenCalledWith(['test-value-2', 'test-value-1']);
   });
 });