Skip to content

docs: clear up relative position confusion #8102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

snowystinger
Copy link
Member

@snowystinger snowystinger commented Apr 17, 2025

Closes #5094
followup to #8091 so that people hopefully don't forget the position relative in the future

We can't handle this in our RAC components and we can't handle it if someone uses VisuallyHidden on its own. So it makes sense that it should be documented

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

@@ -59,3 +59,17 @@ let {visuallyHiddenProps} = useVisuallyHidden();

<div {...visuallyHiddenProps}>I am hidden</div>
```

## Gotchas
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

better section title? use inline alert?

@rspbot
Copy link

rspbot commented Apr 17, 2025

@snowystinger snowystinger changed the title docs: clear up relative position cofusion docs: clear up relative position confusion Apr 18, 2025
@filipw01
Copy link
Contributor

filipw01 commented Apr 22, 2025

@snowystinger I think this gotcha has a bit different root cause than what you described.

I'm almost certain #5094 and #8081 are both caused by the issue I described here https://filip-wachowiak.vercel.app/blog/default-absolute-positioning-in-a-scroll-container

TLDR is that interactive elements inside a visually hidden class work weird when focused in a scroll container in chrome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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