refactor: a11y MultiSelect

Author: juliajforesti

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

@@ -146,19 +146,25 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
 
     const listboxId = props.id ? `${props.id}-listbox` : undefined;
 
+    const {
+      id,
+      name,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
+      'aria-invalid': ariaInvalid,
+      'aria-required': ariaRequired,
+      ...containerProps
+    } = props;
+
     return (
       <Box
         is='div'
         rcx-select
-        role='combobox'
-        aria-expanded={visible === AnimatedVisibility.VISIBLE}
-        aria-haspopup='listbox'
-        aria-controls={listboxId}
         className={[error && 'invalid', disabled && 'disabled']}
         ref={containerRef}
         onClick={handleClick}
         disabled={disabled}
-        {...props}
+        {...containerProps}
       >
         <FlexItem grow={1}>
           <Margins inline='x4'>
@@ -173,13 +179,24 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
                 >
                   <Margins all='x4'>
                     {renderAnchor({
-                      ref: anchorRef,
-                      children: internalValue.length === 0 ? placeholder : null,
-                      disabled: disabled ?? false,
-                      onClick: show,
-                      onBlur: hide,
-                      onKeyDown: handleKeyDown,
-                      onKeyUp: handleKeyUp,
+                      'ref': anchorRef,
+                      'children':
+                        internalValue.length === 0 ? placeholder : null,
+                      'disabled': disabled ?? false,
+                      'onClick': show,
+                      'onBlur': hide,
+                      'onKeyDown': handleKeyDown,
+                      'onKeyUp': handleKeyUp,
+                      'role': 'combobox',
+                      'aria-expanded': visible === AnimatedVisibility.VISIBLE,
+                      'aria-haspopup': 'listbox',
+                      'aria-controls': listboxId,
+                      id,
+                      name,
+                      'aria-labelledby': ariaLabelledBy,
+                      'aria-describedby': ariaDescribedBy,
+                      'aria-invalid': ariaInvalid,
+                      'aria-required': ariaRequired,
                     })}
                     {internalValue.map((value: SelectOption[0]) => {
                       const currentOption = options.find(

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

@@ -1,4 +1,5 @@
 import type {
+  AriaAttributes,
   FocusEventHandler,
   KeyboardEventHandler,
   MouseEventHandler,
@@ -15,7 +16,10 @@ type MultiSelectAnchorProps = {
   onBlur: FocusEventHandler;
   onKeyUp: KeyboardEventHandler;
   onKeyDown: KeyboardEventHandler;
-};
+  role?: string;
+  id?: string;
+  name?: string;
+} & AriaAttributes;
 
 const MultiSelectAnchor = forwardRef<Element, MultiSelectAnchorProps>(
   function MultiSelectAnchor({ children, ...props }, ref) {

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

@@ -15,5 +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,