fix(fuselage): improve a11y for MultiSelect components (#1940)

Co-authored-by: Douglas Fabris <devfabris@gmail.com>

Author: juliajforesti

.changeset/giant-oranges-fix.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': patch
+---
+
+fix(fuselage): improve a11y for `MultiSelect` components

packages/fuselage-forms/src/__snapshots__/test.spec.tsx.snap

@@ -215,9 +215,6 @@ exports[`renders WithMultiSelect without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-field__row"
       >
         <div
-          aria-describedby="react-aria-:rb:-description react-aria-:rb:-error react-aria-:rb:-hint"
-          aria-invalid="true"
-          aria-labelledby="react-aria-:rb:-label"
           class="rcx-box rcx-box--full rcx-select"
         >
           <div
@@ -227,10 +224,13 @@ exports[`renders WithMultiSelect without crashing 1`] = `
               class="rcx-box rcx-box--full rcx-css-w398ts"
             >
               <button
+                aria-describedby="react-aria-:rb:-description react-aria-:rb:-error react-aria-:rb:-hint"
                 aria-expanded="false"
                 aria-haspopup="listbox"
+                aria-invalid="true"
                 aria-labelledby="react-aria-:rb:-label"
                 class="rcx-box rcx-box--full rcx-input-box--undecorated rcx-select__focus rcx-css-trljwa rcx-css-3fq6z9"
+                role="combobox"
                 type="button"
               />
               <button

packages/fuselage/src/components/MultiSelect/MultiSelect.spec.tsx

@@ -1,16 +1,32 @@
 import { composeStories } from '@storybook/react-webpack5';
+import { axe } from 'jest-axe';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
 
 import { render } from '../../testing';
 
 import * as stories from './MultiSelect.stories';
 
-const { Default } = composeStories(stories);
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
 
 withResizeObserverMock();
 
-describe('[MultiSelect Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
-});
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  },
+);
+
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  },
+);

packages/fuselage/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -28,7 +28,7 @@ const options: SelectOption[] = [
 ];
 
 const Template: StoryFn<typeof MultiSelect> = (args) => (
-  <MultiSelect {...args} />
+  <MultiSelect aria-label='MultiSelect' {...args} />
 );
 
 export const Default: StoryFn<typeof MultiSelect> = Template.bind({});

packages/fuselage/src/components/MultiSelect/MultiSelect.tsx

@@ -144,6 +144,19 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
       return show();
     });
 
+    const listboxId = props.id ? `${props.id}-listbox` : undefined;
+
+    const {
+      id,
+      name,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
+      'aria-invalid': ariaInvalid,
+      'aria-required': ariaRequired,
+      ...containerProps
+    } = props;
+
     return (
       <Box
         is='div'
@@ -152,7 +165,7 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
         ref={containerRef}
         onClick={handleClick}
         disabled={disabled}
-        {...props}
+        {...containerProps}
       >
         <FlexItem grow={1}>
           <Margins inline='x4'>
@@ -175,8 +188,17 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
                       'onBlur': hide,
                       'onKeyDown': handleKeyDown,
                       'onKeyUp': handleKeyUp,
+                      'role': 'combobox',
                       'aria-expanded': visible === AnimatedVisibility.VISIBLE,
-                      'aria-labelledby': props['aria-labelledby'],
+                      'aria-haspopup': 'listbox',
+                      'aria-controls': listboxId,
+                      id,
+                      name,
+                      'aria-label': ariaLabel,
+                      'aria-labelledby': ariaLabelledBy,
+                      'aria-describedby': ariaDescribedBy,
+                      'aria-invalid': ariaInvalid,
+                      'aria-required': ariaRequired,
                     })}
                     {internalValue.map((value: SelectOption[0]) => {
                       const currentOption = options.find(
@@ -237,7 +259,7 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
               multiple
               filter={filter}
               renderItem={renderItem || CheckOption}
-              role='listbox'
+              id={listboxId}
               options={filteredOptions}
               onSelect={internalChanged}
               cursor={cursor}

packages/fuselage/src/components/MultiSelect/MultiSelectAnchor.tsx

@@ -1,4 +1,5 @@
 import type {
+  AriaAttributes,
   FocusEventHandler,
   KeyboardEventHandler,
   MouseEventHandler,
@@ -15,18 +16,17 @@ type MultiSelectAnchorProps = {
   onBlur: FocusEventHandler;
   onKeyUp: KeyboardEventHandler;
   onKeyDown: KeyboardEventHandler;
-};
+  role?: string;
+  id?: string;
+  name?: string;
+} & AriaAttributes;
 
 const MultiSelectAnchor = forwardRef<Element, MultiSelectAnchorProps>(
-  function MultiSelectAnchor(props, ref) {
+  function MultiSelectAnchor({ children, ...props }, ref) {
     return (
-      <SelectFocus
-        rcx-input-box--undecorated
-        ref={ref}
-        aria-haspopup='listbox'
-        order={1}
-        {...props}
-      />
+      <SelectFocus rcx-input-box--undecorated ref={ref} order={1} {...props}>
+        {children}
+      </SelectFocus>
     );
   },
 );

packages/fuselage/src/components/MultiSelect/MultiSelectAnchorParams.ts

@@ -15,4 +15,7 @@ export type MultiSelectAnchorParams = {
   onBlur: FocusEventHandler;
   onKeyUp: KeyboardEventHandler;
   onKeyDown: KeyboardEventHandler;
+  role?: string;
+  id?: string;
+  name?: string;
 } & AriaAttributes;

packages/fuselage/src/components/MultiSelect/MultiSelectFilteredAnchor.tsx

@@ -1,4 +1,5 @@
 import type {
+  AriaAttributes,
   FocusEventHandler,
   FormEvent,
   KeyboardEventHandler,
@@ -20,7 +21,10 @@ type MultiSelectFilteredAnchorProps = {
   onBlur: FocusEventHandler;
   onKeyUp: KeyboardEventHandler;
   onKeyDown: KeyboardEventHandler;
-};
+  role?: string;
+  id?: string;
+  name?: string;
+} & AriaAttributes;
 
 const MultiSelectFilteredAnchor = forwardRef<
   HTMLInputElement,
@@ -40,7 +44,6 @@ const MultiSelectFilteredAnchor = forwardRef<
         }
         {...props}
         rcx-input-box--undecorated
-        aria-haspopup='listbox'
         order={1}
       />
     </FlexItem>