Tabs: Make tabs navigable by arrow keys and remove tab navigation

[joelzwarrington]

The Tab component's accessibility can be improved to use expected keyboard behaviour.

Unlike a same-page link, a tab does not move the user to the associated section/panel of content. It just reveals the content visually. This is advantageous to sighted users (including sighted screen reader users) who wish to flit between different sections without having to wade back up the page each time they want to choose a new one.

This comes with an unfortunate side effect: If the user wishes to move to a section by keyboard and interact with its internal content, they have to step through any tabs to the right of the current tab, which are in focus order.

This problem is solved by delegating tab selection to arrow keys. The user is able to select and activate tabs using the arrow keys, while the Tab key is preserved for focusing contents within and below the active tab panel. To put it another way: Tab is not for tabs, which I concede is a bit confusing. I wish the key and the control had different names, but alas.

It's equally important that pressing Shift + Tab returns the user to the selected tab. This is all possible by giving each tab but the selected tab tabindex="-1", which removes the inactive tabs from focus order but allows focus via a script. In the following example, the second tab is the selected tab, as denoted by the aria-selected state being set to true.

• https://inclusive-components.design/tabbed-interfaces/

Expected Behaviour

• While focused on the tab selector, arrow keys which navigate between the sections:
• While focused on the tab selector, tabbing will focus on the content of the tab
• While focused on the content of a tab, tabbing will focus on the tab selector