VisuallyHidden component from the React Aria library breaks viewport position
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
The `VisuallyHidden` component from `react-aria`, used as [described by the documentation](https://react-aria.adobe.com/RadioGroup), 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.
When using components like `checkbox`, `radio` or `switch`, you are not aware about this issue.
### 🤔 Expected Behavior?
Using components like `checkbox`, `radio` or `switch`, which uses 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 when a child component of it get's focused but is offsceen
### 💁 Possible Solution
Components that make use of `` should have a `position: relative` styling per default or `` needs a wrapper that does that.
### 🔦 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.
This issue is known in #5094 but the solution is not clearly visible for users of the library.
The actual "fix" is just hidden soemwhere in the example CSS.
### 🖥️ Steps to Reproduce
1. [Open this example](https://mlj8ct-5173.csb.app/).
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](https://codesandbox.io/p/sandbox/frosty-lake-mlj8ct?file=/src/components/CheckboxWithVisuallyHidden.tsx:8,19). 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
1.13.0
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
Windows 11 Pro 25H2 26200.8246
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.