Update ic-select and ic-search-bar to use a standard combobox pattern
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
### Summary of the bug
ic-select (single, multiple and searchable) and ic-search-bar don't follow a standard [combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/). This results in non-standard and, in some cases, broken keyboard navigation behaviour and strange focus bugs.
Most problems seem to exist in the ic-menu component, which contains its own implementation of aria-activedescendant that it doesn't need (as this should be and is handled by the combobox) and some elements which are focused, either by using tabindex or calling .focus().
As the combobox uses aria-activedescendant, it should always have the dom focus to allow the user to type, and any children should only be styled as if they have focus, and have their id set as the aria-activedescendant (to enable screen reader announcements to behave as if they have focus). Not doing this makes it difficult to use the components with a keyboard and/or a screen reader, and leads to bugs when introducing new behaviour that are difficult to work around.
### 📝 Acceptance Criteria
- ic-select and ic-searchbar follow the [w3c combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/), including all keyboard navigation behaviour and aria attributes.
- ic-searchbar and the three main variants of ic-select have been keyboard tested
- ic-searchbar and the three main variants of ic-select have been tested with VoiceOver - important as aria-activedescendant can be a bit flaky with VoiceOver
- ic-searchbar and the three main variants of ic-select have been tested with NVDA - important as we need to ensure that listboxes containing actions as well as options (e.g. the select all button in the multi-select) don't cause mode-switching on screen readers with modes. See [aria-activedescendant blog](https://sarahmhigley.com/writing/activedescendant/) for details.
### Other useful resources
[W3C editable combobox with manual selection](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/). This is probably the most helpful out of the examples provided by W3C but the other combobox examples might be helpful too.
[aria-activedescendant blog](https://sarahmhigley.com/writing/activedescendant/). Really thorough explanation of what aria-activedescendant is for, why it's used for comboboxes over true focus (i.e. using tab index) and how to handle having actions in the listbox popup as well as options (e.g. the select all button in the multi-select).
### 🚨 Urgency (low, medium or high)
If applicable, tell us how urgent it is that this issue gets resolved, based on the impact it has on your team's work or project timeline.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the ic-menu implementation and the ic-select and ic-search-bar components alongside the W3C combobox pattern and aria-activedescendant guidance. Check the single, multiple, and searchable ic-select variants, then keyboard-test and test with VoiceOver and NVDA. Done means all four components follow the stated combobox keyboard and ARIA criteria without focus bugs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend, testing-qa
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100