[a11y]: ContentSwitcher - tab navigation

[VadimDez]

Package

@carbon/react

Browser

Chrome, Edge, Safari, Firefox

Operating System

MacOS, Windows

Package version

1.74.0

React version

No response

Automated testing tool and ruleset

Manual testing

Assistive technology

No response

Description

While working with customer, we noticed accessibility issue in ContentSwitcher, which allows navigation by using arrow left and right, but it is not intuitive for the visually impaired users that are using "Tab" key for the navigation across the page. Once user navigates to the ContentSwitcher - he's also not aware how many options are there at all.

One possible fix that we came up is to indicate to the user in the alt text that there're multiple options and user has to navigate with arrows.

WCAG 2.1 Violation

No response

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-contentswitcher--default

Steps to reproduce

Try to navigate with Tab key

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[VadimDez]

Setting tabIndex=0 kinda solves the problem but user has to press Tab key twice

<ContentSwitcher>
  <Switch tabIndex={0} name="a" text="a"/>
  <Switch tabIndex={0} name="b" text="b" />
</ContentSwitcher>

And there's no way to keep the first option to be selected after navigating away with Tab key.

Desired behavior would be:

• navigate to ContentSwitcher
• navigate with Tab through the options
• select one
• and then navigate away from ContentSwitcher using tab.