[Bug]: Screen reader focus indicator is misaligned for Checkbox and Radio components [react-aria-components]

[dylesp]

Provide a general summary of the issue here

In react-aria-components, the native elements for Checkbox and Radio are visually hidden using styles that collapse them into a small area (often in the corner of the component). While the CSS focus ring is correctly applied to the visual element, screen readers (like VoiceOver) draw their own focus indicator around the actual HTML input. This results in a misalignment where the screen reader's focus box appears as a tiny square in the corner, disconnected from the visual component.

🤔 Expected Behavior?

The screen reader's focus indicator should ideally encompass the entire visual area of the Checkbox/Radio component or at least be centered within it, ensuring a consistent experience for users with low vision who rely on both visual cues and assistive technology.

😯 Current Behavior

The native input is styled in a way that it occupies a 1x1 pixel space or is positioned at the top-left corner (or center-left position). When navigating via screen reader, the AT focus ring (the "black outline") appears incorrectly positioned or clipped in the corner, rather than surrounding the styled checkbox/radio.

💁 Possible Solution

• Prop Access: Provide a way to pass props or styles directly to the hidden input element (e.g., inputProps) to allow developers to adjust the positioning manually (and for the VisuallyHidden too ofc).

• Internal VisuallyHidden adjustment: Update the internal VisuallyHidden utility used by these components to ensure it doesn't collapse the element's hit area to a single point when it is focusable.

• Styling Update: Instead of width: 1px; height: 1px;, the visually hidden input could be styled to cover the full area of its container while remaining visually hidden. This could be hard to do right without the access to the parent / label elements... However this would force the screen reader focus ring to match the component's dimensions.

🔦 Context

This issue affects the "perceived quality" of accessibility. When the screen reader's focus indicator doesn't match the visual focus, it can be confusing for users with low vision or cognitive disabilities who need to see exactly which element is currently active.

🖥️ Steps to Reproduce

Turn on Voice Over in the official documentation.

https://react-aria.adobe.com/Checkbox

Version

"react-aria-components": "1.15.1"

What browsers are you seeing the problem on?

Safari, Chrome

If other, please specify.

No response

What operating system are you using?

macOS Tahoe version 26.3

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

@majornista any opinions about this? Bit of an implementation detail on our part but unsure what best practices apply here in general.