Carbon: Tabs component needs more keyboard behavior for improved accessibility

[carmacleod]

The Carbon Tabs component could benefit from adding Home, End, and Space key behavior as listed in the Keyboard Interaction section of the ARIA Practices Guide for Tabs.

Rationale:

• Space: Many users expect to be able to use the Space key to activate a Tab. They might not think of typing Enter. Please support both methods.
• Home/End: Since Carbon's Tabs are not "single-tab-stop" (the APG ones are), keyboard users need to type the tab key once per Tab (instead of just once for the whole Tabs component) before they can move past the component. If the Home and End keys were implemented, then at least there would be a quicker way to bypass the component if there are many Tabs.

[snidersd]

There is also an issue with the disabled Tab 4. When navigating with a screen reader using the Arrow keys VO does not announce that Tab 4 is disabled and the content of the tab can receive focus.
Since Tab 4 is no longer disabled this comment can be disregarded.

[snidersd]

@dakahn - Please consider changing the label on this issue from enhancement to bug for the following reason. When testing with VO on macOS Mojave with Chrome.

The expected keyboard navigation is as follows (also see ARIA APG Example for Tabs):

1. Tab to navigate to the list of tabs. The focus should be on the first Tab Label 1.
2. Tab again and the focus should move to the tab panel and announce the text.
3. Shift-Tab should move focus back to the tab list Tab Label 1.
4. The Right and Left Arrow keys should move focus back and forth across the list of tabs.

Actual result:

1. Tab to navigate to the list of tabs. The focus is on the first Tab Label 1 as expected.
2. Tab again and the focus indicator moves to the next tab, but Tab Label 1 is still the active tab.
3. Continue to Tab until focus indicator is on the last Tab Label 4.
4. Press the Right Arrow key and the focus moves to Tab Label 2 and the tab panel displays.
5. Press the Left Arrow key to move focus to Tab Label 1.
6. Press Control-Option Right Arrow keys and the focus indicator moves to Tab Label 2.
7. Press Control-Option Right Arrow keys 4 more times to focus and read the tab panel for Tab Label.

[dakahn]

Right, will do. Set priority to medium. Happy to escalate if you feel like this is a high priority issue.

[carmacleod]

I agree with @snidersd that single-tab-stop Tabs components are better for keyboard users because they can navigate through and past the tab with fewer keystrokes. Many keyboard users (particularly screen reader users) expect to use arrow keys to traverse through the tabs.

Note that the Carbon Tabs component is closer in behavior to the 2nd APG example ("Manual Activation") because the tabs are activated using space or enter key.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[dakahn]

Keeping this open. Tabs should be modified to be a single tab stop in line with the APG example. 👍

[carmacleod]

Please also remove nav wrapper from Tabs. See https://github.com/carbon-design-system/carbon-components-react/issues/2171 for details.

[emyarod]

it looks like our Tabs component has gotten a few updates since this ticket was open. just confirming, are all of the original points still valid for the current component version?

[dakahn]

Still relevant 🌷
I've got a WIP PR here that addresses some of these concerns:
https://github.com/carbon-design-system/carbon/pull/2852

[emyarod]

3258 adds home/end key navigation and addresses the disabled tab issue @snidersd mentioned. do we want to switch from arrow key navigation to tab/shift-tab navigation as well? if so, I can add that to #3258