Dialog/Select/Popover/Menu: Fix focus guards incorrectly getting aria-hidden

[LoryGlory]

Description

When a modal component (Dialog, Select, Popover, Menu) opens, hideOthers(content) from the aria-hidden package marks all siblings of the content in document.body as aria-hidden="true". This includes the focus guard <span> elements injected by useFocusGuards at the edges of document.body.

The result: focus guards have both tabindex="0" (making them keyboard-focusable) and aria-hidden="true" (hiding them from the accessibility tree). This is a WCAG 2.1.1 Level A violation — keyboard-focusable elements must not be hidden from assistive technology.

Reported by axe and Level Access audit tools:

<span data-radix-focus-guard="" tabindex="0" aria-hidden="true" style="outline: none; opacity: 0; position: fixed; pointer-events: none;"></span>

Fix: Pass focus guards as additional elements to hideOthers so they are excluded from the aria-hidden treatment. The [data-radix-focus-guard] selector targets exactly the spans created by createFocusGuard() in @radix-ui/react-focus-guards.

The same pattern existed in all four components that call both useFocusGuards and hideOthers, so all four are fixed here.

Fixes #3593

[changeset-bot]

🦋 Changeset detected

Latest commit: e13387b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@radix-ui/react-popover	Patch
@radix-ui/react-dialog	Patch
@radix-ui/react-select	Patch
@radix-ui/react-menu	Patch
radix-ui	Patch
@radix-ui/react-alert-dialog	Patch
@radix-ui/react-context-menu	Patch
@radix-ui/react-dropdown-menu	Patch
@radix-ui/react-menubar	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR