fix(fuselage): improve a11y for MultiSelect components

.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
@@ -226,12 +223,15 @@ exports[`renders WithMultiSelect without crashing 1`] = `
             <div
               class="rcx-box rcx-box--full rcx-css-w398ts"
             >
-              <button
+              <div
+                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"
-                type="button"
+                role="combobox"
+                tabindex="0"
               />
               <button
                 class="rcx-box rcx-chip rcx-css-trljwa"

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

@@ -1,4 +1,5 @@
 import { composeStories } from '@storybook/react-webpack5';
+import { axe } from 'jest-axe';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
 
 import { render } from '../../testing';
@@ -11,6 +12,14 @@ withResizeObserverMock();
 
 describe('[MultiSelect Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />);
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
+
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    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

@@ -114,7 +114,7 @@
     const [cursor, handleKeyDown, handleKeyUp, reset, [visible, hide, show]] =
       useCursor(index, filteredOptions, internalChanged);
 
     useEffect(reset, [filter]);
 
     const innerRef = useRef<HTMLElement>(null);
     const anchorRef = useMergedRefs(ref, innerRef);
@@ -144,6 +144,19 @@
       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 @@
         ref={containerRef}
         onClick={handleClick}
         disabled={disabled}
-        {...props}
+        {...containerProps}
       >
         <FlexItem grow={1}>
           <Margins inline='x4'>
@@ -175,8 +188,17 @@
                       '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 @@
               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>

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

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`[MultiSelect Component] renders without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-select"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-1sr8su7"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-w398ts"
+        >
+          <div
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="MultiSelect"
+            class="rcx-box rcx-box--full rcx-input-box--undecorated rcx-select__focus rcx-css-trljwa rcx-css-3fq6z9"
+            role="combobox"
+            tabindex="0"
+          >
+            Placeholder here...
+          </div>
+        </div>
+      </div>
+      <div
+        class="rcx-box rcx-box--full rcx-select__addon rcx-css-x7bl3q rcx-css-1bprq55"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+        >
+          
+        </i>
+      </div>
+    </div>
+  </div>
+</body>
+`;

packages/fuselage/src/components/Options/Options.tsx

@@ -51,6 +51,7 @@ const Options = forwardRef<HTMLElement, OptionsProps>(function Options(
     renderItem: OptionComponent = Option,
     onSelect,
     customEmpty,
+    id,
     ...props
   },
   ref,
@@ -122,6 +123,7 @@ const Options = forwardRef<HTMLElement, OptionsProps>(function Options(
             is='ol'
             aria-multiselectable={multiple || true}
             role='listbox'
+            id={id}
             aria-activedescendant={
               options?.[cursor]?.[0]
                 ? String(options?.[cursor]?.[0])

packages/fuselage/src/components/Select/SelectFocus.tsx

@@ -12,8 +12,8 @@ const SelectFocus = forwardRef<Element, SelectFocusProps>(
         fontScale='p2m'
         color='hint'
         rcx-select__focus
-        is='button'
-        type='button'
+        is='div'
+        tabIndex={0}
         {...props}
       />
     );