Disabled tabs should remain keyboard focusable as per W3C WAI ARIA guidelines about react-tabs HOT 3 OPEN

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.

from react-tabs.

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.

from react-tabs.

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.

from react-tabs.