Repository navigation
Disabled tabs should remain keyboard focusable as per W3C WAI ARIA guidelines #521
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
Activity
Jastagar commentedon Nov 27, 2023
Hello,
I would really like to work on this task. I believe i have enough skillset to resolve this issue. Please assign me on it so i can start to work on it right away.
here are my proposed solutions:
1-> Instead of Aria-Disabled to true, we simply make a default CSS class that gives the illusion of the tab being disabled and use aria-label and aria-describleBy to give user the same accessibility and description. at the same time, we do not bind it to any tabpanel. It would be possible for user to override the default style class.
2-> We again do not set aria-disabled to true and instead we just let it work as a normal tab but instead of rendering the content it will just render a default "This Tab is Disable" type of content. We can ask developer for an optional prop which would be a react component that will be used as customized disabled tab child.
Please be free to give your suggestions as well.
danez commentedon Nov 28, 2023
Love that you want to work on this. It would be ideal if the visual state could stay close to what it is right now.
Jastagar commentedon Dec 2, 2023
I have solved the problem as by my side but i am having trouble with some test cases as my solution enables one to use arrow keys over disabled tabs but the tests expect the result otherwise. So the issue was resolved but some testcases get failed
As per my solution i have added a new props in the Tabs component called "disabledpanel", this is used to render content to show to users who click on the disabled tabs. By default this is just says "Disabled Tab". I did this to provide users with more flexibility as to what they can display on the disabled tab.