| • alexhollender_WMF | |
| Jul 15 2021, 5:17 PM |
| F34552305: search tabbing.webm | |
| Jul 15 2021, 5:17 PM |
| F34552302: image.png | |
| Jul 15 2021, 5:17 PM |
Currently you cannot tab from the search input field to the search results. Imagine the following:
Currently the ULS allows you to tab from the search field to a specific result:
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | Jdlrobson | T195473 [GOAL] Invest in the MobileFrontend & MinervaNeue frontend architecture | |||
| Resolved | Jdlrobson | T195478 [EPIC] Speed up unit test execution and increase code coverage | |||
| Resolved | Jdlrobson | T195482 [EPIC] Review and refactor MobileFrontend components used by Minerva | |||
| Open | None | T281930 [EPIC] Migrate MobileFrontend's code to Vue.js and Codex | |||
| Open | None | T212465 [EPIC] None of our View's should exhibit 2 levels of inheritance | |||
| Open | BUG REPORT | ovasileva | T289084 MinervaNeue shows 2 search elements when JS is disabled | ||
| Open | None | T282473 [GOAL] Use the Codex search widget inside the mobile site | |||
| Resolved | Jdlrobson | T287097 [GOAL] Accessibility compliance focus (new development & fixes) | |||
| Declined | Jdrewniak | T286729 Improve tabbing functionality for new search component |
The w3 accessibility recommendations for a combobox could be more explicit on how to handle the tab key, but given that the search component supports the recommended up arrow/down arrow key navigation [1], I'm not sure how necessary (or even desirable) it is for the tab key to navigate through the search results. It is also notable to me that in their example of a combobox, the tab key does not navigate through the results - it only supports up/down arrow key navigation [2]
[1] https://www.w3.org/TR/wai-aria-practices-1.1/#textbox-keyboard-interaction
[2] https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html#ex1_label
hmm, super interesting — thanks for looking into this. @Volker_E and/or @Pginer-WMF do either of you have context on how we decided to support tab-navigation in the ULS, and (taking in mind on the links @nray has shared), whether we still think tab-navigation is a good pattern or not?
I can't speak for the ULS, it might be considered a slightly different interaction pattern than the search suggestions, but for search, the tab key should be reserved for navigating away from the input field to the submit button. Following the W3C examples, I'm pretty sure the recommended keys for suggestions is only the up and down arrow keys.
Asides from the WC3 post, this post from UX Mastery offers a good why that's the case:
The user shouldn’t Tab through the suggestion list because that takes focus away from the input field. No input focus means users can’t keep typing to refine the suggestions.
– https://uxmastery.com/anatomy-of-an-accessible-auto-suggest
interesting point, though 1) I think that would match the person's expectation (tab takes the focus away from the input field), so I don't think that's necessarily an issue, and 2) what about when the person sees the result they want in the suggestion list...why not give them an additional means of getting to it?
I don't recall all the details, but I guess it may have been influenced by the previous format of the selector being a list of links. I don't see a problem for it to be navigated using the arrows if that is consistent with other components and the W3C recommendations.