Double-check that Tabs are properly accessible (ARIA etc.)

[cvrebert]

Refs #13554.
CC: @patrickhlauke

[davidscotson]

#19738 might also be relevant here.

[thbt]

Regarding tabs accessibility, will you implement keyboard support ? Or will it be up to the user ?

[patrickhlauke]

coming in monstrously late on this:

• tabs now have relevant ARIA attributes, however
• tabs do not currently implement the expected keyboard behavior

at a minimum, tabs should behave as follows (from https://www.w3.org/TR/wai-aria-practices/#tabpanel)

For the tab list:

• Tab: When focus moves into the tab list, places focus on the active tab element . When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.

(side note: this means only the currently active tab should receive focus - currently, all tabs receive focus)

When focus is on a tab element in a horizontal tab list:

• Left Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
• Right Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab (See note below).

When focus is on a tab in a tablist with either horizontal or vertical orientation:

• Space or Enter: Activates the tab if it was not activated automatically on focus.

[mdo]

@twbs/js-review Is this something you could take on to adjust the keyboard behavior and focus?

[XhmikosR]

I guess we need some help about this.

[patrickhlauke]

will tackle this at last over here #28918