fix: Fix Multiselect selected a11y issue

Author: NathanZlion

src/internal/components/options-list/index.tsx

@@ -44,6 +44,7 @@ export interface OptionsListProps extends BaseComponentProps {
   decreaseBlockMargin?: boolean;
   embedded?: boolean;
   stickyItemBlockSize?: number | null;
+  isMultiSelect?: boolean;
 }
 
 const BOTTOM_TRIGGER_OFFSET = 80;
@@ -78,6 +79,7 @@ const OptionsList = (
     ariaDescribedby,
     embedded,
     stickyItemBlockSize,
+    isMultiSelect,
     ...restProps
   }: OptionsListProps,
   ref: React.Ref<HTMLDivElement>
@@ -127,6 +129,7 @@ const OptionsList = (
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
       aria-describedby={ariaDescribedby}
+      aria-multiselectable={role === 'listbox' && isMultiSelect ? true : undefined}
     >
       {open && children}
     </Tag>

src/internal/components/selectable-item/interfaces.ts

@@ -28,7 +28,10 @@ export type SelectableItemProps = BaseComponentProps & {
   sticky?: boolean;
   afterHeader?: boolean;
   withScrollbar?: boolean;
-} & ({ ariaSelected?: boolean; ariaChecked?: never } | { ariaSelected?: never; ariaChecked?: boolean | 'mixed' });
+} & (
+    | { ariaSelected?: boolean; ariaChecked?: never }
+    | { ariaSelected?: never | boolean; ariaChecked?: boolean | 'mixed' }
+  );
 
 export interface ItemDataAttributes {
   'data-group-index'?: string;

src/multiselect/internal.tsx

@@ -197,6 +197,7 @@ const InternalMultiselect = React.forwardRef(
             screenReaderContent={multiselectProps.announcement}
             highlightType={multiselectProps.highlightType}
             firstOptionSticky={hasFilteredOptions && enableSelectAll}
+            isMultiSelect={true}
           />
         </Dropdown>
 

src/select/parts/multiselect-item.tsx

@@ -159,6 +159,7 @@ const MultiSelectItem = (
   return (
     <SelectableItem
       disableContentStyling={!!renderResult}
+      ariaSelected={!!selected}
       ariaChecked={isParent && indeterminate ? 'mixed' : Boolean(selected)}
       selected={selected}
       isNextSelected={isNextSelected}

src/select/parts/plain-list.tsx

@@ -29,6 +29,7 @@ export interface SelectListProps {
   useInteractiveGroups?: boolean;
   screenReaderContent?: string;
   firstOptionSticky?: boolean;
+  isMultiSelect?: boolean;
   renderOption?: SelectProps.SelectOptionItemRenderer | MultiselectProps.MultiselectOptionItemRenderer;
 }
 
@@ -49,6 +50,7 @@ const PlainList = (
     useInteractiveGroups,
     screenReaderContent,
     firstOptionSticky,
+    isMultiSelect,
     renderOption,
   }: SelectListProps,
   ref: React.Ref<SelectListProps.SelectListRef>
@@ -87,7 +89,12 @@ const PlainList = (
   const withScrollbar = !!width && width.inner < width.outer;
 
   return (
-    <OptionsList {...menuProps} ref={mergedRef} stickyItemBlockSize={stickyOptionBlockSize}>
+    <OptionsList
+      {...menuProps}
+      ref={mergedRef}
+      stickyItemBlockSize={stickyOptionBlockSize}
+      isMultiSelect={isMultiSelect}
+    >
       {renderOptions({
         renderOption,
         options: filteredOptions,

src/select/parts/virtual-list.tsx

@@ -32,6 +32,7 @@ const VirtualListOpen = forwardRef(
       useInteractiveGroups,
       screenReaderContent,
       firstOptionSticky,
+      isMultiSelect,
       renderOption,
     }: SelectListProps,
     ref: React.Ref<SelectListProps.SelectListRef>
@@ -106,7 +107,7 @@ const VirtualListOpen = forwardRef(
     });
 
     return (
-      <OptionsList {...menuProps} stickyItemBlockSize={stickySize} ref={menuRef}>
+      <OptionsList {...menuProps} stickyItemBlockSize={stickySize} ref={menuRef} isMultiSelect={isMultiSelect}>
         {finalOptions}
         <div
           aria-hidden="true"
@@ -125,10 +126,10 @@ const VirtualListOpen = forwardRef(
 );
 
 const VirtualListClosed = forwardRef(
-  ({ menuProps, listBottom }: SelectListProps, ref: React.Ref<SelectListProps.SelectListRef>) => {
+  ({ menuProps, listBottom, isMultiSelect }: SelectListProps, ref: React.Ref<SelectListProps.SelectListRef>) => {
     useImperativeHandle(ref, () => () => {}, []);
     return (
-      <OptionsList {...menuProps} ref={menuProps.ref}>
+      <OptionsList {...menuProps} ref={menuProps.ref} isMultiSelect={isMultiSelect}>
         {listBottom ? (
           <div role="option" className={styles['list-bottom']}>
             {listBottom}