Vuetify: [Bug Report] VTab keyboard navigation is not following w3 aria design pattern

[phiter]

Environment

Vuetify Version: 2.2.8
Vue Version: 2.6.11
Browsers: Chrome 79.0.3945.130
OS: Windows 10

Steps to reproduce

1. Focus on the tab component via keyboard
2. Try to navigate with arrows

Expected Behavior

It should follow the w3 specs for tab navigation:

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.

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.
Home (Optional): Moves focus to the first tab. Optionally, activates the newly focused tab (See note below).
End (Optional): Moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
Shift + F10: If the tab has an associated pop-up menu, opens the menu.
Delete (Optional): If deletion is allowed, deletes (closes) the current tab element and its associated tab panel, sets focus on the tab following the tab that was closed, and optionally activates the newly focused tab. If there is not a tab that followed the tab that was deleted, e.g., the deleted tab was the right-most tab in a left-to-right horizontal tab list, sets focus on and optionally activates the tab that preceded the deleted tab. If the application allows all tabs to be deleted, and the user deletes the last remaining tab in the tab list, the application moves focus to another element that provides a logical work flow. As an alternative to Delete, or in addition to supporting Delete, the delete function is available in a context menu.

Actual Behavior

The navigation is done through tab only. Arrows won't work.

Reproduction Link

https://codepen.io/phiter/pen/KKwOVrM

Other comments

So basically we have two possible forms of activation: manual and automatic. I personally think we could make this a prop and let the developer decide.

We already have the aria roles for the tab list and tabs themselves, but we're missing the role="tabpanel (which is one for each item instead of the tab container).

The active tab should have tabindex="0" and the other ones tabindex="-1", which makes it possible to tab into the content instead of the other tabs.

I don't think this is something hard to implement and I also think this could break the current flow of some users, if they're used to use tab to navigate through tabs, but I'm not sure if this should be considered a "breaking change".

[phiter]

By the way, in the current implementation, you can tab into a disabled tab and activate it by pressing enter. We should look into that.

[phiter]

Sorry I forgot to mention this note from the specs.

NOTE

1. It is recommended that tabs activate automatically when they receive focus as long as their associated tab panels are displayed without noticeable latency. This typically requires tab panel content to be preloaded. Otherwise, automatic activation slows focus movement, which significantly hampers users' ability to navigate efficiently across the tab list. For additional guidance, see § 6.4 Deciding When to Make Selection Automatically Follow Focus.

1. If the tabs in a tab list are arranged vertically:

1. Down Arrow performs as Right Arrow is described above.
2. Up Arrow performs as Left Arrow is described above.
3. If the tab list is horizontal, it does not listen for Down Arrow or Up Arrow so those keys can provide their normal browser scrolling functions even when focus is inside the tab list.