FloatingPortal + FloatingFocusManager: non-modal dialog introduces an accessibility violation when the reference is used within a tablist element
Describe the bug
floating-ui has an a11y issue when useFloating is used with FloatingPortal and FloatingFocusManager. When a floating reference element (button[role=tab]) is included inside a Tabs widget (role="tablist"), floating adds some extra elements (probably guards) to make focus management + portals work well with Screen Readers.
The actual issue is that FloatingPortal appends an element next to the reference element (e.g. <span aria-owns="id-to-floating-element">) but it doesn't include an aria-hidden attribute to it. This causes that this span is included in the accessibility tree as a generic element, triggering the following a11y violation:
aria-required-children
If an ARIA role requires specific child roles, include those child elements. [axe-core link](https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI)
Element has children which are not allowed: span[aria-owns]
/* element */
<div id=":r1s:-tablist" role="tablist" aria-label="Test" class="_m7qbl9">To Reproduce
https://codesandbox.io/p/sandbox/7jyfyg
Steps to reproduce the behavior:
- In the preview tab, inspect the
Floating tabelement using devtools (reference element). - Check that a
<span aria-owns="..."element is added next to the reference element. - Verify that this element doesn't include the
aria-hidden="true"attribute, causing that the element is included as part of the accessibility tree (making it an invalid element for thetablistparent element).
Expected behavior
The element defined with <span aria-owns should also include the aria-hidden attribute, that way this element won't be included as a direct child of the tablist parent container.
Context:
- OS: Mac OS 26.2 (Tahoe)
- Browser: Chrome
- Version: 143
Additional context
This problem can be identified by using axe-core (as a Chrome extension).
This can also be reproduced here: https://5e1bf4b385e3fb0020b7073c-inqaogczrz.chromatic.com/?path=/story/packages-tabs-tabs--tab-label-render-function&addonPanel=storybook/a11y/panel&a11ySelection=violations.aria-required-children.1
Source: floating-ui/floating-ui