[Bug]: A11y: a11y issue (nested-interactive) was detected by FastPass when use Tab with a Button

[izkizk8]

Component

TabList

Package version

^9

React version

^18

Environment

no needed

Current Behavior

[nested-interactive] issue was detected by FastPass

Expected Behavior

Tab can be rendered as div instead of button <Tab as='div' ... >

Reproduction

https://stackblitz.com/edit/fpgh9r-upbnt6

Steps to reproduce

just open demo then use FastPass

Are you reporting an Accessibility issue?

yes

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[smhigley]

This is not a valid control, and would result in inaccessible UI in multiple ways:

• screen readers generally do not expose interactive controls within a tab
• when keyboard focus does land on the inner button, it creates multiple failures -- it bumps windows screen reader users into the wrong mode for continuing to interact with the tablist, and it exposes the wrong information (index/position, role, selection, etc).
• this is not accessible to some voice control software, including Voice Control on mac & iOS

Rendering the Tab as a div will have no effect on the allowed content model (ARIA prohibits buttons or other interactive elements from being children of tabs regardless of the HTML tag used, spec'd here: https://w3c.github.io/aria/#tab).

If you wish to have a "..." menu within a tablist, that "..." would need to be a separate Tab in its own right.

[microsoft-github-policy-service[bot]]

Because this issue is marked as by design and has not had activity for over 3 days, we're automatically closing it for house-keeping purposes.