canonical / canonical/vanilla-framework
Search & Filter tab/keyboard Selected Count accessibility issues
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
**Describe the bug**
When tabbing through the Search & Filter component, the `p-search-and-filter__selected-count` element is focused, which is an issue for two reasons:
1. Due to the DOM order, it's focused before the search input, despite being visually after the search input
2. It's focused even when hidden, resulting in "missing" focus when this element is focused
**To Reproduce**
Steps to reproduce the behavior:
1. Open a [Search & Filter demo](https://vanillaframework.io/docs/examples/patterns/search-and-filter/chip-overflow)
3. Tab through the page elements
4. Witness no focused element when hitting tab after the last chip has been focused
**Expected behavior**
Optimally, the `p-search-and-filter__selected-count` element should be located after `p-search-and-filter__box` in the DOM. It should also not be focused when it is visually hidden.
Contributor guide
Research direction
Open the linked Search & Filter demo and inspect the p-search-and-filter__selected-count and p-search-and-filter__box elements while tabbing through the component. Confirm the selected count follows the search box in DOM order and is skipped when visually hidden; verify that keyboard focus remains visible throughout the interaction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- accessibility
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100