fix: modify BooleanControl so that screen readers read a more accurat…

…e label, and update its interaction tests
storybookjs · Oct 11, 2023 · ad10877 · ad10877
1 parent ccffdc3
commit ad10877
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/code/ui/blocks/src/controls/Boolean.stories.tsx b/code/ui/blocks/src/controls/Boolean.stories.tsx
@@ -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, name, ...props }) => {
     const channel = addons.getChannel();
 
     channel.emit(RESET_STORY_ARGS, { storyId: id });
@@ -55,23 +58,26 @@ export const Toggling: StoryObj<typeof BooleanControl> = {
     const setBooleanControl = canvas.getByText('Set boolean');
     await fireEvent.click(setBooleanControl);
 
-    let toggle = await canvas.findByTitle('Change to true');
-    expect(toggle).toBeInTheDocument();
+    let toggle = await canvas.findByLabelText(name);
+    expect(toggle).toBeVisible();
 
     // from False to True
     await fireEvent.click(toggle);
-    toggle = await canvas.findByTitle('Change to false');
-    expect(toggle).toBeInTheDocument();
+    toggle = await canvas.findByRole('switch');
+    expect(toggle).not.toBeChecked();
 
     // from True to False
     await fireEvent.click(toggle);
-    toggle = await canvas.findByTitle('Change to true');
+    toggle = await canvas.findByRole('switch');
     expect(toggle).toBeInTheDocument();
   },
 };
 
 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
@@ -98,7 +98,14 @@ export type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
  * <BooleanControl name="isTrue" value={value} onChange={handleValueChange}/>
  * ```
  */
-export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange, onBlur, onFocus }) => {
+export const BooleanControl: FC<BooleanProps> = ({
+  name,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  ...props
+}) => {
   const onSetFalse = useCallback(() => onChange(false), [onChange]);
   if (value === undefined) {
     return (
@@ -112,16 +119,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>
   );
 };