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 and its group label 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 typing echo.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0127ZbvzW5a888TLW3jTJXWJ

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,41 @@ 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('includes the option group in the improvedA11y announcement', 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'));
+
+    await waitFor(() => {
+      expect(getByRole('status')).toHaveTextContent('Apple, With HRIS');
+    });
+
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    await waitFor(() => {
+      expect(getByRole('status')).toHaveTextContent('Banana, 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;
@@ -368,8 +391,8 @@ export const Select: FC<SelectProps> = React.forwardRef(
         message = searchQuery ? `${noResultsText} ${searchQuery}` : '';
       }
 
-      // VoiceOver ignores aria-activedescendant, so announce the active option
-      // here. Tradeoff: NVDA hears it twice (native + this echo).
+      // VoiceOver ignores aria-activedescendant, so echo the active option here.
+      // Tradeoff: NVDA hears it twice (native + this echo).
       if (improvedA11y && activeDescendantId) {
         const visibleOptions: SelectOption[] = (options || []).filter(
           (opt: SelectOption) =>
@@ -382,9 +405,18 @@ export const Select: FC<SelectProps> = React.forwardRef(
         if (activeOption) {
           const positionSeparator: string =
             selectLocale?.lang?.optionPositionSeparatorText ?? 'of';
-          message = `${activeOption.text}, ${
-            activeIndex + 1
-          } ${positionSeparator} ${visibleOptionsCount}`;
+          const group: string = optionGroupById[activeDescendantId] ?? '';
+          const activeText: string = [
+            activeOption.text,
+            group,
+            `${activeIndex + 1} ${positionSeparator} ${visibleOptionsCount}`,
+          ]
+            .filter(Boolean)
+            .join(', ');
+          message =
+            announceModeRef.current === 'nav'
+              ? activeText
+              : `${message} ${activeText}`;
         }
       }
 
@@ -399,6 +431,19 @@ export const Select: FC<SelectProps> = React.forwardRef(
       activeDescendantId,
     ]);
 
+    // Announce arrow nav immediately, but debounce open/filter so per-keystroke
+    // updates coalesce and don't race the input's own typing echo.
+    const [announcedMessage, setAnnouncedMessage] = useState<string>('');
+    useEffect(() => {
+      const delay: number =
+        announceModeRef.current === 'nav' ? 0 : ANNOUNCE_DEBOUNCE_DURATION;
+      const timer: ReturnType<typeof setTimeout> = setTimeout(
+        () => setAnnouncedMessage(liveRegionMessage),
+        delay
+      );
+      return () => clearTimeout(timer);
+    }, [liveRegionMessage]);
+
     const toggleOption = (option: SelectOption): void => {
       setSearchQuery('');
 
@@ -934,6 +979,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
       if (!nextId) {
         return;
       }
+      announceModeRef.current = 'nav';
       setActiveDescendantId(nextId);
       if (canUseDocElement()) {
         requestAnimationFrame(() => {
@@ -1149,6 +1195,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
       if (!improvedA11y) {
         return;
       }
+      announceModeRef.current = 'list';
       if (!dropdownVisible) {
         setActiveDescendantId(null);
         return;
@@ -1192,7 +1239,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.