The VisuallyHidden component from the React Aria library breaks styling under certain conditions

[zachkaigler]

Provide a general summary of the issue here

The VisuallyHidden component from react-aria, used as described by the documentation, breaks page styling at certain viewport dimensions. Namely, if the element that it's being used with is offscreen and needs to be scrolled to in order to be interacted with, doing so will break the height and flex flow of the parent container in some strange way.

🤔 Expected Behavior?

Using the VisuallyHidden component should have no effect on the rest of the page.

😯 Current Behavior

Interacting with a component that uses VisuallyHidden breaks the surrounding page layout under the conditions mentioned above and shown in the below example.

💁 Possible Solution

No response

🔦 Context

Using the component as described by the documentation breaks my application's styling, something which took a good chunk of time to pinpoint. The VisuallyHidden component should only hide its children nodes and have no effect on the rest of the DOM.

🖥️ Steps to Reproduce

1. Open this example.
2. Resize your browser window so that the checkboxes at the bottom of each column overflow off the bottom of the screen.
3. Scroll down to the bottom checkboxes. Click "Working Option 15" and observe that it behaves exactly as you'd expect.
4. Now click "Broken Option 15" and observe that it breaks the page layout by shifting everything upwards
5. Open the source code here. Observe that the Checkbox component - the one that does not break the styling - applies a display: none rule to the input element in order to hide it, rather than using the VisuallyHidden component from react-aria. Observe that the CheckboxWithVisuallyHidden component does use VisuallyHidden, and that interacting with that version of the checkbox breaks the page.

Version

"react-aria": "^3.28.0",

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS Ventura 13.3.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Yep, I see the issue. It also doesn't work with Tab keyboard navigation.

An option for you to fix it in your app:
You can apply position: relative on your Checkbox__Container class, this means that the visually hidden element will be positioned relative to it, instead of relative to App. This means the visually hidden input can't be positioned outside the flow of Main and therefore won't add any overflow scroll. This will also fix the Tab keyboard navigation.

As for solutions we can apply:
We might be able to add a top/left to the visually hidden element, however, if the overflow element and the stacking context root are separated as they are in your example, then this may not work.
This also wouldn't solve the keyboard navigation.

Otherwise, we'd need to create a wrapping element around the VisuallyHidden which has position relative on it with a height and width of 0. I think this may cause a problem with assistive techologies though. We'll have to try it out and consult with our accessibility team. It may also be positioned incorrectly within the "Checkbox" depending on where various elements have been positioned visually.

[thomaux]

Setting top, left or bottom to 0 on VisuallyHidden resolves the scrolling issue for me. However I do not know if this causes problems for screen readers?

[cephalization]

Just hit this as well. Occurs when I have a radio group and I select a radio option that is inside of overflow scroll. Completely destroys my whole page layout until I wrap my radio group with <div style={{position: "relative"}}>... or add position: relative to the root styles of RadioGroup

[snowystinger]

Setting top, left or bottom to 0 on VisuallyHidden resolves the scrolling issue for me. However I do not know if this causes problems for screen readers?

I think this would cause a potentially confusing VO cursor as it would appear as though the entire page (or whatever parent has position: relative) is "focused". You should put position relative on the root of the component that the VisuallyHidden is for, such as Checkbox's outer most div. Then you can safely use top, left, right, bottom to 0. You can always test it out with VO or any of the other assistive technologies to see the impact.

Occurs when I have a radio group and I select a radio option that is inside of overflow scroll. Completely destroys my whole page layout until I wrap my radio group with <div style={{position: "relative"}}>... or add position: relative to the root styles of RadioGroup

I think moving the position relative to the Radio would be better than the RadioGroup, otherwise it could be confusing to AT users as the elements would all potentially be stacked in one place.

The best thing for us to do is include some information on the page for VisuallyHidden https://react-spectrum.adobe.com/react-aria/VisuallyHidden.html#visuallyhidden and maybe on components using VisuallyHidden as well.