adobe / adobe/react-spectrum

VisuallyHidden component from the React Aria library breaks viewport position

Open
#9,989 7 comments 0 reactions 0 assignees View on GitHub
needs investigation
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.