feat: Add ARIA combobox pattern to autocomplete search components#1209
Open
akj wants to merge 2 commits into
Open
feat: Add ARIA combobox pattern to autocomplete search components#1209akj wants to merge 2 commits into
akj wants to merge 2 commits into
Conversation
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
7 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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=comboboxon each input, witharia-expanded,aria-autocomplete=list,aria-haspopup=listbox,aria-controls, andaria-activedescendantrole=listboxplus a unique id on each dropdown;role=option, a unique id, andaria-selectedon each itemonAriaStateChangecallback so the parent input (which owns the element) mirrors the Autocomplete child's open / active-index state, instead of lifting that state upidPrefixper instance so the ARIA ids don't collide across the three widgets.slds-is-selectedhighlight for the active option, so sighted keyboard users get the same cue screen readers do (SLDS only ships this styling for buttons)aria-activedescendantalways points at an element that is actually in the DOMTesting
popup.spec.js) that runs in the existing mock harness, so it needs no org. It checks the role wiring,aria-expandedtoggling on open and on Escape, the listbox/option markup, and thataria-activedescendantresolves to a rendered,aria-selectedoption.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!