Skip to content

feat: Add ARIA combobox pattern to autocomplete search components#1209

Open
akj wants to merge 2 commits into
tprouvot:releaseCandidatefrom
akj:aria-autocomplete-combobox
Open

feat: Add ARIA combobox pattern to autocomplete search components#1209
akj wants to merge 2 commits into
tprouvot:releaseCandidatefrom
akj:aria-autocomplete-combobox

Conversation

@akj

@akj akj commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

This implements the WAI-ARIA combobox pattern on the three AllDataSearch / Autocomplete inputs in the popup (Users, Objects, Shortcuts), so screen readers can announce the dropdown, its options, and which option is currently active.

This is the autocomplete portion of #1109, split out as I offered there. The link-to-button (WCAG 4.1.2) conversion from that PR will follow as a separate PR for #1107, so each change can be reviewed on its own. Addresses #1108.

Changes

  • role=combobox on each input, with aria-expanded, aria-autocomplete=list, aria-haspopup=listbox, aria-controls, and aria-activedescendant
  • role=listbox plus a unique id on each dropdown; role=option, a unique id, and aria-selected on each item
  • an onAriaStateChange callback so the parent input (which owns the element) mirrors the Autocomplete child's open / active-index state, instead of lifting that state up
  • a unique idPrefix per instance so the ARIA ids don't collide across the three widgets
  • a visible .slds-is-selected highlight for the active option, so sighted keyboard users get the same cue screen readers do (SLDS only ships this styling for buttons)
  • three virtual-scroll fixes (item height measurement, scroll-into-view math, and keeping the selected item inside the rendered range) so aria-activedescendant always points at an element that is actually in the DOM

Testing

  • Tested manually with NVDA.
  • Added an e2e test ("Autocomplete Accessibility (ARIA combobox)" in popup.spec.js) that runs in the existing mock harness, so it needs no org. It checks the role wiring, aria-expanded toggling on open and on Escape, the listbox/option markup, and that aria-activedescendant resolves to a rendered, aria-selected option.

As with the previous PR, I'm a screen reader user and a little outside my lane on the visual side, so please flag anything that looks off visually. Thanks!

akj added 2 commits June 18, 2026 12:29
WAI-ARIA combobox on the 3 AllDataSearch/Autocomplete instances (Users, Objects, Shortcuts): role=combobox + aria-expanded/autocomplete/haspopup/controls/activedescendant on the input; role=listbox/option + aria-selected on the dropdown; onAriaStateChange bridges state to the parent; unique idPrefix per widget; visible .slds-is-selected highlight; virtual-scroll fixes so aria-activedescendant always points to a rendered element. Refs tprouvot#1108
Asserts the WAI-ARIA combobox contract on the AllDataSearch input: role / aria-controls / aria-haspopup / aria-autocomplete wiring, aria-expanded toggling on open and on Escape, role=listbox/option markup, and that aria-activedescendant resolves to a rendered, aria-selected option (guarding the virtual-scroll regression class). Runs in the existing mock harness; no org required. Refs tprouvot#1108
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.

1 participant