Skip to content

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

Merged
agupta-eightfold merged 1 commit into
mainfrom
shubham/select-a11y-announcement
Jul 14, 2026
Merged

fix(Select): announce result count with the active option for improvedA11y combobox#1152
agupta-eightfold merged 1 commit into
mainfrom
shubham/select-a11y-announcement

Conversation

@shubham-kumar1-eightfold

@shubham-kumar1-eightfold shubham-kumar1-eightfold commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

SUMMARY:

The improvedA11y combobox echoed the highlighted option into the result-count live region, overwriting the count — so screen readers stopped announcing "N matches found" while filtering (regression surfaced after #1149). This combines the count and option in one polite announcement instead.

What screen readers now hear (single live region):

  • Open / filter: "{count} matches found. {option}, {group}, {n} of {total}" — one announcement, including the seeded option's group.
    • VoiceOver merges live-region updates into one utterance, so racing separate count/option regions dropped one of them.
    • VoiceOver doesn't read the seeded option's group natively on open, so we include it here.
  • Arrow navigation: "{option}, {n} of {total}" — option only; no count (avoids re-announcing it as noise) and no group (VoiceOver reads the option + its group natively while arrowing, so echoing them would double-announce).
  • Debounced on open/filter so per-keystroke updates coalesce into one announcement and don't race the combobox input's own typing echo; arrow-nav announces immediately.
  • Plain (non-improvedA11y) Selects are completely unchanged — all of the above is gated behind improvedA11y.

Implementation (minimal delta on #1149):

  • liveRegionMessage now appends the option to the count instead of overwriting it, gated by an announceModeRef ('list' on open/filter, 'nav' on arrow — set in the seed effect and moveActiveDescendant).
  • Group comes from an optionId → group map memoized on options (O(1) lookup, no per-announcement rescan), also gated to improvedA11y.
  • Debounce is a useEffect + setTimeout (the repo's standard pattern, e.g. Accordion), gated to improvedA11y; the delay is the ANNOUNCE_DEBOUNCE_DURATION constant in Select.types.ts, matching the repo's timing-constant convention (ANIMATION_DURATION, …).
  • Adds one exported timing constant (ANNOUNCE_DEBOUNCE_DURATION), consistent with the existing ones (ANIMATION_DURATION, …); no new component props, no locale changes.

GITHUB ISSUE (Open Source Contributors)

N/A

JIRA TASK (Eightfold Employees Only):

https://eightfoldai.atlassian.net/browse/ENG-203165
Follow-up to the combobox VPAT work in #1149.

CHANGE TYPE:

  • Bugfix Pull Request
  • Feature Pull Request

TEST COVERAGE:

  • Tests for this change already exist
  • I have added unittests for this change

TEST PLAN:

  • Updated Select.test.tsx: open announces the count and Apple, 1 of 3; after ArrowDown the region announces Banana, 2 of 3 without the count.
  • Added a grouped test: open announces the seeded option's group (Apple, With HRIS); ArrowDown announces Banana, 2 of 2 without the group (left to VoiceOver's native reading).
  • Full Select.test.tsx suite passes (81 tests); Form suite unaffected (the improvedA11y gate keeps plain Selects untouched).
  • Verified with VoiceOver + Safari on grouped and ungrouped template Selects.

@codesandbox-ci

codesandbox-ci Bot commented Jul 13, 2026

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@codecov

codecov Bot commented Jul 13, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 97.05882% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 85.00%. Comparing base (fe124ee) to head (f759a78).

Files with missing lines Patch % Lines
src/components/Select/Select.tsx 97.05% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1152      +/-   ##
==========================================
+ Coverage   84.98%   85.00%   +0.01%     
==========================================
  Files        1230     1230              
  Lines       21555    21588      +33     
  Branches     8193     8209      +16     
==========================================
+ Hits        18319    18351      +32     
- Misses       3150     3151       +1     
  Partials       86       86              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@shubham-kumar1-eightfold shubham-kumar1-eightfold force-pushed the shubham/select-a11y-announcement branch 4 times, most recently from f6ed694 to 3156726 Compare July 13, 2026 13:19

@agupta-eightfold agupta-eightfold left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@shubham-kumar1-eightfold shubham-kumar1-eightfold force-pushed the shubham/select-a11y-announcement branch 7 times, most recently from 0a25aa9 to a6a173f Compare July 13, 2026 16:09
…dA11y 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.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0127ZbvzW5a888TLW3jTJXWJ
@shubham-kumar1-eightfold shubham-kumar1-eightfold force-pushed the shubham/select-a11y-announcement branch from a6a173f to f759a78 Compare July 13, 2026 16:33
@agupta-eightfold agupta-eightfold merged commit 60acd40 into main Jul 14, 2026
7 of 9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants