dusk-network / dusk-network/duskit
refactor(components): unify tablist accessibility and keyboard logic
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 2
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
After we close #251 we should plan a refactor to avoid having duplicate logic in Tabs and ContentSwitch.
Description
Currently, the Tabs and ContentSwitch components share the same underlying WAI-ARIA tablist and tab semantics. However, the logic for keyboard navigation (Arrow keys, Home, End, Space, Enter) and roving tabindex is implemented independently in each component.
Note that the correct implementation is the one found in ContentSwitch.
This duplication increases the maintenance surface and risks inconsistent accessibility behaviors across the library. This refactor aims to extract the common logic into a single source of truth.
Goals
- Ensure identical keyboard navigation and focus management for all tab-based components.
- Reduce code duplication in
TabsandContentSwitch. - Centralize the management of ARIA attributes (e.g.,
aria-selected,tabindex).
Potential Implementation
The shared logic could be extracted into a reusable module. Possibilities include:
- A headless Svelte Action to manage DOM events and focus.
- A centralized utility or custom store to handle the state and keyboard mapping.
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
After #251 is closed, compare the keyboard navigation, roving tabindex, and ARIA logic in the Tabs and ContentSwitch components, using ContentSwitch as the reference. Evaluate whether a shared Svelte Action, utility, or custom store best fits the existing components. Done means both components share one implementation and have identical keyboard, focus, and ARIA behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100