canonical / canonical/vanilla-framework

Search & Filter tab/keyboard Selected Count accessibility issues

Open
#5,290 4 comments 0 reactions 0 assignees View on GitHub
Bug 🐛 P3 Needs decision
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.