Combobox selection announcement

[cemcshane]

Research:

I found that most accessible combobox examples got this announcement behavior for free because they would autoclose + refocus on the textbox after each selection (which generally had a dynamic label that would get announced with selections). This pattern doesn't align with the comboboxes on the Scorecard measure list page, which only autoclose for single-select comboboxes and have static labels that aren't reflective of the selections made.

I couldn't find any examples of accessible comboboxes with the exact same label AND autoclose/focus behavior as ours, so I chatted with Claude and ChatGPT about it. The main takeaway was that we don't have any live region (visible on the page or to screen readers), that would allow screen readers to pick up on selection changes. A standard practice for addressing this is by adding an aria-live region that's visually hidden and contains the relevant selection info. Using LiveAnnouncer does this all under the hood, so I opted for that since the code is way more intuitive and readable.

Note:
Depending on the type of combobox used, there's a chance that there will be some screen reader redundancy in announcing selections (e.g. with announcing dynamic labels on textbox refocus after selection), but I ran through all of our combobox examples in the demo app and even where some examples had redundancy, it seemed pretty unobtrusive.

Scorecard ticket: https://jiraent.cms.gov/browse/MACS-833

[cemcshane]

beta-release-bot: ui-components

[github-actions]

Beta Release Workflow (ui-components): Succeeded ✅

To install, run npm install @hsi/[email protected]

[tcoile]

action: this goes into scorecard and we think more about this for fsp standards