[Bug?]: Accessibility issue in Tab.ListItem

[Krishnaveni-PS]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Within Paths, we use Tab.ListItem to organize the headers horizontally. When we navigate through the tabs using keyboard navigation the items listed under Tab.ListItem are not picked up.

Tab.ListItem is being imported from @pluralsight/ps-design-system-tab.

Expected behavior 🤔

Within Paths, the screen reader needs to pick up the header that lists with Tab.ListItem.

This needs to have visible keyboard focus and get picked up by a screenreader.

Steps to reproduce 🕹

Steps:

1. Go to paths section in app.pluralsight.com
2. With in paths, there are lists of Paths types- "Skills, Certification, Conferences, etc.
3. Try to navigate to each path type using keyboard tab.

Context 🔦

Accessibility issue in Paths horizontabl tab items.

Your environment 🌎

No response

[caseybaggz]

Since this component only controls the styles, you might be able to fix it by using the new useTabs hook in the v2 system.

[Rykus0]

@Krishnaveni-PS Tabs should be navigable with arrow keys, which I notice they are. Is the problem you're reporting that you cannot navigate to them using tab? If so, this is not a problem and is by design. Tab should take you into or out of the set of tabs, and then arrows will navigate between tabs while the group has focus.

Please confirm your expectation.