fix: Patch Screan reader issue in multiselect selected items

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

@@ -6,6 +6,8 @@ import { HighlightType } from '../options-list/utils/use-highlight-option';
 
 export type SelectableItemProps = BaseComponentProps & {
   children: React.ReactNode;
+  ariaSelected?: boolean;
+  ariaChecked?: boolean | 'mixed';
   selected?: boolean;
   highlighted?: boolean;
   disabled?: boolean;
@@ -28,7 +30,7 @@ export type SelectableItemProps = BaseComponentProps & {
   sticky?: boolean;
   afterHeader?: boolean;
   withScrollbar?: boolean;
-} & ({ ariaSelected?: boolean; ariaChecked?: never } | { ariaSelected?: never; 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}

src/select/utils/use-announcement.ts

@@ -62,3 +62,9 @@ export function useAnnouncement<Option extends OptionHolder>({
   const defaultDescription = defaultOptionDescription({ option, parentGroup: group, highlightText });
   return [selectedAnnouncement, defaultDescription].filter(Boolean).join(' ');
 }
+
+//   // Use default renderer. Selection state is communicated via aria-selected/aria-checked attributes,
+//   // not through the accessible name or live region announcements.
+//   const defaultDescription = defaultOptionDescription({ option, parentGroup: group, highlightText });
+//   return defaultDescription;
+// }