Accessibility of Tabs

[filipjnc]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Open link to minimal reproduction with screen reader turned on and try to navigate with TAB and arrows key through tablist and the corresponding tabpanels.

What is expected?

1. Screen reader reads the active tab when navigating to tablist
2. Screen reader reads the current tab when switching to a new one
3. Screen reader reads the content of the current tab when navigating next (TAB key)

What is actually happening?

1. Screen reader only reads that tablist is selected
2. Screen reader does not read current tab at all when switching to a new one
3. After selecting a tab and navigating next (TAB key) the screen reader reads "blank", then skips content and reads again "blank". This is because there are two hidden spans with tabindex="0" inside active tabpanel. To my knowledge, they have no purpose.

Environment	Info
antd	3.23.2
React	Irrespectively
System	Windows 7/10
Browser	Firefox NVDA / IE11 JAWS

---

We let an agency test our antd application for accessibility and this is one of the most critical points that came out. While the current implementation allows a more or less good keyboard navigation, the screen reader cannot read and intrepret the tabs and their contents well-enough.

Todos according to this example: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role)

1. Remove tabindex="0" from tablist and assign it to the active tab
2. The inactive tabs should get programatically tabindex="-1"
3. Give each tabpanel an id="UUID" and add aria-controls="panel-uuid" to corresponding tabs
4. Give each tab an id="UUID" and add aria-labelledby="tab-uuid" to corresponding tabpanels
5. Assign each tabpanel tabindex="0" and remove the two unecessary child-elements with tabindex="0"

[filipjnc]

It also applies to the integration within the Card component.

[timkindberg]

Maybe these should be built on top of https://ui.reach.tech/tabs/ (1.9kb), @reach-ui provides completely unstyled aria-compliant components for the harder more complex components.

[kaushalyap]

Any progress with this?

[filipjnc]

@kaushalyap I solved merge conflicts in my pull request react-component/tabs#218 and hope the authors merge it soon.

[DenysVuika]

@filipjnc we are having lots of issues with Tabs accessibility changes for the scenario described in bpmn-io/dmn-js#615 essentially, the Tabs now prevent dropdown functionality working correctly.