Merge pull request #24418 from danielmarcano/toggle-accessibility-fix

Controls: Improve accessibility of BooleanControl for screen readers
storybookjs · Oct 31, 2023 · 994689d · 994689d
2 parents 8fdd30a + 440372f
commit 994689d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 20 deletions.
diff --git a/code/ui/blocks/src/controls/Boolean.stories.tsx b/code/ui/blocks/src/controls/Boolean.stories.tsx
@@ -1,6 +1,6 @@
 import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
-import { within, fireEvent } from '@storybook/testing-library';
+import { within, fireEvent, waitFor } from '@storybook/testing-library';
 import { addons } from '@storybook/preview-api';
 import { RESET_STORY_ARGS, STORY_ARGS_UPDATED } from '@storybook/core-events';
 import { BooleanControl } from './Boolean';
@@ -15,33 +15,36 @@ const meta = {
     info: 'This is info for the Boolean control stories',
     jsx: { useBooleanShorthandSyntax: false },
   },
-  args: { name: 'boolean' },
 } as Meta<typeof BooleanControl>;
 
 export default meta;
 
 export const True: StoryObj<typeof BooleanControl> = {
   args: {
     value: true,
+    name: 'True',
   },
 };
 export const False: StoryObj<typeof BooleanControl> = {
   args: {
     value: false,
+    name: 'False',
   },
 };
 
 export const Undefined: StoryObj<typeof BooleanControl> = {
   args: {
     value: undefined,
+    name: 'Undefined',
   },
 };
 
 export const Toggling: StoryObj<typeof BooleanControl> = {
   args: {
     value: undefined,
+    name: 'Toggling',
   },
-  play: async ({ canvasElement, id }) => {
+  play: async ({ canvasElement, id, args, step }) => {
     const channel = addons.getChannel();
 
     channel.emit(RESET_STORY_ARGS, { storyId: id });
@@ -50,28 +53,37 @@ export const Toggling: StoryObj<typeof BooleanControl> = {
     });
 
     const canvas = within(canvasElement);
+    await step('Change from Undefined to False', async () => {
+      const setBooleanControl = canvas.getByText('Set boolean');
+      await fireEvent.click(setBooleanControl);
 
-    // from Undefined to False
-    const setBooleanControl = canvas.getByText('Set boolean');
-    await fireEvent.click(setBooleanControl);
-
-    let toggle = await canvas.findByTitle('Change to true');
-    expect(toggle).toBeInTheDocument();
+      const toggle = await canvas.findByLabelText(args.name);
+      await expect(toggle).toBeVisible();
+    });
 
-    // from False to True
-    await fireEvent.click(toggle);
-    toggle = await canvas.findByTitle('Change to false');
-    expect(toggle).toBeInTheDocument();
+    await step('Change from False to True', async () => {
+      const toggle = canvas.getByRole('switch');
+      await fireEvent.click(toggle);
+      await waitFor(async () => {
+        await expect(toggle).toBeChecked();
+      });
+    });
 
-    // from True to False
-    await fireEvent.click(toggle);
-    toggle = await canvas.findByTitle('Change to true');
-    expect(toggle).toBeInTheDocument();
+    await step('Change from True to False', async () => {
+      const toggle = canvas.getByRole('switch');
+      await fireEvent.click(toggle);
+      await waitFor(async () => {
+        await expect(toggle).not.toBeChecked();
+      });
+    });
   },
 };
 
 export const TogglingInDocs: StoryObj<typeof BooleanControl> = {
   ...Toggling,
+  args: {
+    name: 'Toggling In Docs',
+  },
   parameters: {
     docs: {
       autoplay: true,

diff --git a/code/ui/blocks/src/controls/Boolean.tsx b/code/ui/blocks/src/controls/Boolean.tsx
@@ -112,16 +112,17 @@ export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange, onBlur
   const parsedValue = typeof value === 'string' ? parse(value) : value;
 
   return (
-    <Label htmlFor={controlId} title={parsedValue ? 'Change to false' : 'Change to true'}>
+    <Label htmlFor={controlId} aria-label={name}>
       <input
         id={controlId}
         type="checkbox"
         onChange={(e) => onChange(e.target.checked)}
         checked={parsedValue}
+        role="switch"
         {...{ name, onBlur, onFocus }}
       />
-      <span>False</span>
-      <span>True</span>
+      <span aria-hidden="true">False</span>
+      <span aria-hidden="true">True</span>
     </Label>
   );
 };