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.

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,16 @@ 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');
   });
 });

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,
@@ -342,6 +343,8 @@ export const Select: FC<SelectProps> = React.forwardRef(
 
     // 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 +385,13 @@ export const Select: FC<SelectProps> = React.forwardRef(
         if (activeOption) {
           const positionSeparator: string =
             selectLocale?.lang?.optionPositionSeparatorText ?? 'of';
-          message = `${activeOption.text}, ${
+          const activeText: string = `${activeOption.text}, ${
             activeIndex + 1
           } ${positionSeparator} ${visibleOptionsCount}`;
+          message =
+            announceModeRef.current === 'nav'
+              ? activeText
+              : `${message} ${activeText}`;
         }
       }
 
@@ -399,6 +406,18 @@ 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(() => {
+      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 +953,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
       if (!nextId) {
         return;
       }
+      announceModeRef.current = 'nav';
       setActiveDescendantId(nextId);
       if (canUseDocElement()) {
         requestAnimationFrame(() => {
@@ -1149,6 +1169,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
       if (!improvedA11y) {
         return;
       }
+      announceModeRef.current = 'list';
       if (!dropdownVisible) {
         setActiveDescendantId(null);
         return;
@@ -1192,7 +1213,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.