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. Addresses #1108. (I originally planned to re-submit the link-to-button conversion from that PR separately for #1107, but I've decided not to pursue that piece.)

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 July 16, 2026 10:50
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
@akj
akj force-pushed the aria-autocomplete-combobox branch from 84aca14 to 31b3fcd Compare July 16, 2026 14:52
@akj

akj commented Jul 16, 2026

Copy link
Copy Markdown
Contributor Author

Hi @tprouvot — just surfacing this PR since #1108 was closed as completed, which I suspect took this off the radar.

I've rebased onto the latest releaseCandidate and the mocked e2e suite is green, so it's ready for review whenever you have a chance. Happy to address any feedback. Thanks!

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