Properly implement the WAI accessibility standard for tabs

[joeally]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

Currently the implementation of tabs does not indicate which tab is selected via aria-selected. See the screenshot:

Note that this is described in the MDN docs :

When elements with the tab role are selected or active they should have their aria-selected attribute set to true

Tabs also don't allow the user to set aria-controls to indicated which tab panel a tab is linked with. As per the MDN docs:

Further, an element with the tab role should contain the aria-controls property identifying a corresponding tabpanel (that has a tabpanel role) by that element's id

In an ideal world the component would put content in an element with the role tabpanel and set the relevant tab panel to have aria-expanded set. From the MDN docs:

When a tab is selected or active, its corresponding controlled tabpanel should have its aria-expanded attribute set to true and its hidden attribute set to false, otherwise the reverse.

But this might be difficult given the current API so at the very least the documentation should show examples with [role="tabpanel"] and aria-expanded set.

I can have a go at a PR if you like but it would almost certainly require a change to the API so I wouldn't want to start until the API is decided.

Apart from that the Tabs component does not implement the keyboard actions specified in WAI but perhaps we should leave that for another time.

What type of pull request would this be?

Enhancement

Any links to similar examples or other references we should review?

Please refer to:

• https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role

[joeally]

With regards to aria-expanded I think the MDN documentation has it wrong.

According to the https://w3c.github.io/aria/#tab the tab role supports aria-expanded. And according to https://w3c.github.io/aria/#tabpanel the tabpanel role doesn't.

Although that seems a bit strange seeing as that would mean tab would have some redundancy between aria-selected and aria-expanded

[endigo9740]

@joeally I appreciate the catch on the aria-selected. That's a miss on our part we can fix. Likewise we can review the missing keyboard shortcuts.

That said, our tab component doesn't handle the markup for the tab panels. We leave that 100% up to the end user. So it's up to the end user if they want to comply or not. That is, unless like you said, we dramatically alter the way the tab component works.

I'd say we would treat this as a feature request, and a PR would be welcome. Though I'd suggest submitting a PR early, as a draft, so we can discuss and formalize the structure as it's implemented. There's some considerations to be made with how our components are built and documented and I would feel more comfortable if that was a collaborate process for a first time contributor for a change of this size.

I might suggest you reach out on Discord in our #contributor channel - that would allow for easier discourse back and forth. We can set a list of requirements upfront. Thanks!

[joeally]

Hi @endigo9740 - Thanks for the speedy response.

That said, our tab component doesn't handle the markup for the tab panels.

I think this is reasonable so long as there is a way to pass in the ID of the tabpanel to the Tab component which can then forward this on to aria-controls

When I get some time i'll try to create a draft PR for this.

I'd also like to thank you and the team for your hard work on this project. Keep up the good work 🥇

[endigo9740]

True, that is a consideration. Ok sounds good. I welcome the help. Thanks!

[endigo9740]

@joeally Just checking to see if you're still interested in handling this. If not I'll put it on my docket in the immediate future.

[endigo9740]

No response so I've unassigned this one. It's open to anyone willing and able.

[endigo9740]

Note to self: it may be nice to allow for tabs to work like anchors for route navigation. We've had a few people request this sort of functionality. It would operate similar to how our AppRail/Tile components work.

Reference on Discord:
https://discord.com/channels/1003691521280856084/1048010639219642419/threads/1063555741262282872

[endigo9740]

I'll aim to handle this as part of: #782

[endigo9740]

Implemented as part of: #857

Please feel free to test and post feedback in that ticket.