Disabled tabs should remain keyboard focusable as per W3C WAI ARIA guidelines
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.1k
- Forks
- 455
- Avg merge
- 5h 9m
- Merged PRs (30d)
- 2
Description
Disabled tabs do not currently accept focus when navigating via keyboard and this is confusing for screen-reader users.
Eg. assume we have 3 tabs, the second of which is disabled. For a screen reader user using the inbuilt MacOS screen reader it will read:
Tab 1, selected, tab, group, 1 of 3.
When they press the right arrow key to the next tab it will read:
Tab 3, selected, tab, group, 3 of 3
It skips over the disabled tab giving no information as to what the skipped tab is or why it was skipped.
The WAI ARIA guidelines state here:
For the following composite widget elements, keep them focusable when disabled: [...]
- Tab elements in a set of Tabs
Contributor guide
No contributing guide indexed for this repository
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 locating the tab keyboard-navigation and disabled-tab handling described by this issue, then compare the behavior with the linked WAI-ARIA guidance. Done means a disabled tab remains reachable with the keyboard and is announced to screen-reader users instead of being skipped; verify the three-tab example and add or update coverage if the project has relevant tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100