[Tabs] Keyboard navigation does not work with disabled tabs
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current behavior
Tabs keyboard navigation does not behave correctly when there are disabled tab items
Expected Behavior 🤔
Keyboard navigation should either allow the selected tabs to be focusable but not selectable or skip them. According to W3C accessibility standards, they should be focusable but not selectable.
Steps to Reproduce 🕹
https://codesandbox.io/s/material-demo-v5ddi?file=/demo.js
Steps:
- Try to use the keyboard to navigate through the tabs after focusing it
| Tech | Version |
|---|---|
| Material-UI | v4.10.0 |
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 with the linked CodeSandbox reproduction and use its keyboard interaction to confirm how disabled tabs behave. Read the Tabs keyboard-navigation entry point and existing tests, if present, to determine whether disabled tabs should be focusable but not selectable or skipped. Done means keyboard navigation follows the chosen W3C-aligned behavior without selecting disabled tabs.
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