fix(search-modal): add ARIA combobox semantics to quick search#1706
fix(search-modal): add ARIA combobox semantics to quick search#1706caugner wants to merge 1 commit into
Conversation
|
b720866 was deployed to: https://fred-pr1706.review.mdn.allizom.net/ |
Add the combobox/listbox roles, `aria-activedescendant`, and a `role="status"` live region to the quick-search autocomplete so that screen readers announce when results appear and read the highlighted option's text during arrow-key navigation. Keyboard navigation keeps focus on the input and moves the active option via `aria-activedescendant`; the active index is reset on input so it can't point past a shrunken result set. Add the `search-modal-results-status` and `search-modal-results-label` strings, translated for `de`, `fr`, `ja`, and `zh-CN`.
fe961da to
77d94d8
Compare
caugner
changed the title
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| aria-activedescendant=${ | ||
| hasOptions ? `search-modal-result-${this._selected}` : nothing | ||
| } |
There was a problem hiding this comment.
aria-activedescendant can reference a non-existent option during an in-progress re-search. While _queryIndex is PENDING, the complete renderer isn't called so the result <li>s are unmounted, but @lit/task keeps .value set to the previous non-empty results. So hasOptions stays true and aria-activedescendant points at search-modal-result-0, while the only rendered option is the trailing site-search <li> whose id is search-modal-result-${siteSearchIndex} (the stale, non-zero length). Since every keystroke triggers a new task run, this dangling reference occurs on each refinement.
Gate aria-activedescendant on the completed state (e.g. reuse searchComplete) so it only references options that are currently rendered.
AI-generated review by Claude
2 participants
Description
Add ARIA combobox semantics to the quick-search autocomplete (
search-modal):role="combobox",aria-autocomplete="list",aria-controls,aria-expanded, andaria-activedescendant.listboxwithoptionchildren carrying ids andaria-selected.role="status"live region announces the result count.aria-activedescendant; the active index resets on input so it can't point past a shrunken result set.search-modal-results-statusandsearch-modal-results-labelstrings, translated forde,fr,ja,zh-CN.Motivation
The quick-search autocomplete had no combobox semantics, so with a screen reader no announcement was made when results appeared, and arrow-key navigation re-read the typed query instead of the highlighted option. This intends to follow the APG combobox-with-listbox pattern plus GitHub's result-count announcement.
Additional details
es,ko,pt-BR,ru,zh-TW) don't translatesearch-modaland fall back to en-US, so they were left unchanged.Related issues and pull requests
Fixes #1175.