[Bug]: TabList can't pass the automated checks of Accessibility Insights

[ticnic]

Library

React Components / v9 (@fluentui/react-components)

System Info

Microsoft Edge version 111.0.1661.51

Are you reporting Accessibility issue?

None

Reproduction

https://react.fluentui.dev/?path=/docs/components-tablist--default

Bug Description

Actual Behavior

Can't pass the FastPass of A11y Insights

Expected Behavior

Pass the FastPass of A11y Insights

Logs

Issue: Ensures aria-hidden elements are not focusable nor contain focusable elements (aria-hidden-focus - https://accessibilityinsights.io/info-examples/web/aria-hidden-focus)

Element path: i:nth-child(1)

Snippet: <i tabindex="0" role="none" data-tabster-dummy="isFirst=true, isOutside=false, (Mover, tabbable=true)" aria-hidden="true" style="position: fixed; height: 1px; width: 1px; opacity: 0.001; z-index: -1; content-visibility: hidden; top: 0px; left: 0px;"></i>

====

Element path: i:nth-child(9)

Snippet: <i tabindex="0" role="none" data-tabster-dummy="isFirst=false, isOutside=false, (Mover, tabbable=true)" aria-hidden="true" style="position: fixed; height: 1px; width: 1px; opacity: 0.001; z-index: -1; content-visibility: hidden; top: 0px; left: 0px;"></i>

====

Issue: Ensures elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Element path: .fui-TabList

Snippet: <div role="tablist" data-tabster="{&quot;mover&quot;:{&quot;cyclic&quot;:true,&quot;direction&quot;:1,&quot;memorizeCurrent&quot;:true}}" class="fui-TabList ___1k2jn28_5jmqkc0 f22iagw f1vx9l62 fi64zpg flvyvdh f10pi13n f122n59 f152e8ze f1u4y9u9">

Related paths: 
  i:nth-child(1)
  i:nth-child(9)

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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

[smhigley]

@ticnic the first one (aria-hidden-focus) is a known false positive caused by us using hidden placeholder elements that manage focus when you land on them. It's not a real error since focus never remains on those elements.

The second one (aria-required-children) is a false positive that has already been fixed upstream by axe-core, and just needs to be consumed by Accessibility Insights: dequelabs/axe-core#3850

[msft-fluent-ui-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.