fix(Select): announce result count with the active option for improvedA11y combobox

The improvedA11y combobox echoed the active option into the result-count live
region and overwrote the count, so screen readers stopped hearing it. Announce
the count together with the highlighted option in one polite region (option only
on arrow navigation), debounced on open/filter so per-keystroke updates coalesce
and do not race the combobox input's own typing echo. On open/filter the seeded
option's group label is included too, since VoiceOver does not read it natively
there; during arrow navigation the group is left to the native reading.

Author: shubham-kumar1-eightfold

src/components/Select/Select.test.tsx

@@ -1514,7 +1514,7 @@ describe('Select improvedA11y', () => {
     });
   });
 
-  test('announces the highlighted option in the live region as focus moves', async () => {
+  test('announces the result count with the highlighted option, and only the option on arrow keys', async () => {
     const { getByPlaceholderText, getByRole, getAllByRole } = render(
       <Select
         improvedA11y
@@ -1528,14 +1528,44 @@ describe('Select improvedA11y', () => {
     fireEvent.click(input);
     await waitFor(() => getAllByRole('option'));
 
-    // Opening highlights the first option: announce its name and position.
     await waitFor(() => {
-      expect(getByRole('status')).toHaveTextContent('Apple, 1 of 3');
+      const status: string = getByRole('status').textContent;
+      expect(status).toContain('matches found');
+      expect(status).toContain('Apple, 1 of 3');
     });
 
     fireEvent.keyDown(input, { key: 'ArrowDown' });
     await waitFor(() => {
       expect(getByRole('status')).toHaveTextContent('Banana, 2 of 3');
     });
+    expect(getByRole('status').textContent).not.toContain('matches found');
+  });
+
+  test('announces the seeded option group on open, but not while arrowing', async () => {
+    const grouped = [
+      { text: 'With HRIS', value: 'hris', type: MenuItemType.subHeader },
+      { text: 'Apple', value: 'apple' },
+      { text: 'Others', value: 'others', type: MenuItemType.subHeader },
+      { text: 'Banana', value: 'banana' },
+    ];
+    const { getByPlaceholderText, getByRole, getAllByRole } = render(
+      <Select improvedA11y filterable options={grouped} placeholder="Fruit" />
+    );
+    const input = getByPlaceholderText('Fruit') as HTMLInputElement;
+    input.focus();
+    fireEvent.click(input);
+    await waitFor(() => getAllByRole('option'));
+
+    // Open: the seeded option carries its group (VoiceOver won't read it natively).
+    await waitFor(() => {
+      expect(getByRole('status')).toHaveTextContent('Apple, With HRIS');
+    });
+
+    // Arrow: group is left to VoiceOver's native reading, so the echo omits it.
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    await waitFor(() => {
+      expect(getByRole('status')).toHaveTextContent('Banana, 2 of 2');
+    });
+    expect(getByRole('status').textContent).not.toContain('Others');
   });
 });

src/components/Select/Select.tsx

@@ -34,6 +34,7 @@ import {
 import { Pill, PillSize, PillType } from '../Pills';
 import { IconName } from '../Icon';
 import {
+  ANNOUNCE_DEBOUNCE_DURATION,
   SelectOption,
   SelectProps,
   SelectShape,
@@ -340,8 +341,30 @@ export const Select: FC<SelectProps> = React.forwardRef(
       }
     }, [filterable, initialFocus]);
 
+    // Option id -> its group label (nearest preceding sub header).
+    const optionGroupById = useMemo<Record<string, string>>(() => {
+      if (!improvedA11y) {
+        return {};
+      }
+      const groups: Record<string, string> = {};
+      let group = '';
+      for (const opt of options || []) {
+        if (opt.hideOption) {
+          continue;
+        }
+        if (opt.type === MenuItemType.subHeader) {
+          group = opt.text ?? '';
+        } else if (opt.id) {
+          groups[opt.id] = group;
+        }
+      }
+      return groups;
+    }, [options, improvedA11y]);
+
     // Derive the live region message, memoized to prevent spurious
     const lastLiveRegionMessageRef = useRef<string>('');
+    // Mode: 'list' (open/filter) includes the count; 'nav' (arrows) omits it.
+    const announceModeRef = useRef<'list' | 'nav'>('list');
     const liveRegionMessage = useMemo<string>(() => {
       if (!dropdownVisible) {
         return lastLiveRegionMessageRef.current;
@@ -382,9 +405,24 @@ export const Select: FC<SelectProps> = React.forwardRef(
         if (activeOption) {
           const positionSeparator: string =
             selectLocale?.lang?.optionPositionSeparatorText ?? 'of';
-          message = `${activeOption.text}, ${
+          const position: string = `${
             activeIndex + 1
           } ${positionSeparator} ${visibleOptionsCount}`;
+          // Group only on open/filter; the seeded option isn't announced natively.
+          const activeText: string =
+            announceModeRef.current === 'nav'
+              ? `${activeOption.text}, ${position}`
+              : [
+                  activeOption.text,
+                  optionGroupById[activeDescendantId] ?? '',
+                  position,
+                ]
+                  .filter(Boolean)
+                  .join(', ');
+          message =
+            announceModeRef.current === 'nav'
+              ? activeText
+              : `${message} ${activeText}`;
         }
       }
 
@@ -399,6 +437,21 @@ export const Select: FC<SelectProps> = React.forwardRef(
       activeDescendantId,
     ]);
 
+    // Debounce open/filter so keystroke updates coalesce; arrow nav is immediate.
+    const [announcedMessage, setAnnouncedMessage] = useState<string>('');
+    useEffect(() => {
+      if (!improvedA11y) {
+        return undefined;
+      }
+      const delay: number =
+        announceModeRef.current === 'nav' ? 0 : ANNOUNCE_DEBOUNCE_DURATION;
+      const timer: ReturnType<typeof setTimeout> = setTimeout(
+        () => setAnnouncedMessage(liveRegionMessage),
+        delay
+      );
+      return () => clearTimeout(timer);
+    }, [liveRegionMessage, improvedA11y]);
+
     const toggleOption = (option: SelectOption): void => {
       setSearchQuery('');
 
@@ -934,6 +987,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
       if (!nextId) {
         return;
       }
+      announceModeRef.current = 'nav';
       setActiveDescendantId(nextId);
       if (canUseDocElement()) {
         requestAnimationFrame(() => {
@@ -1149,6 +1203,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
       if (!improvedA11y) {
         return;
       }
+      announceModeRef.current = 'list';
       if (!dropdownVisible) {
         setActiveDescendantId(null);
         return;
@@ -1192,7 +1247,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
               className={styles.selectLiveRegion}
               role="status"
             >
-              {liveRegionMessage}
+              {improvedA11y ? announcedMessage : liveRegionMessage}
             </div>
             {/* When Dropdown is hidden, place Pills outside the reference element */}
             {!dropdownVisible && showPills() ? getPills() : null}

src/components/Select/Select.types.ts

@@ -13,6 +13,8 @@ import { PillProps } from '../Pills';
 import { MenuItemButtonProps } from '../Menu/MenuItem/MenuItem.types';
 import { InputStatus } from '../../shared/utilities';
 
+export const ANNOUNCE_DEBOUNCE_DURATION: number = 400;
+
 type SelectLang = {
   /**
    * The Select locale.