Skip to content

fix: check for element visibility should take react aria attribute into consideration #8642

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

Merged
merged 3 commits into from
Aug 7, 2025

Conversation

snowystinger
Copy link
Member

@snowystinger snowystinger commented Jul 26, 2025

Closes #8636

Can't test in jsdom because it behaved correctly both ways, it seems to be wrong about element visibility compared to browsers.

Test in the story.

✅ 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:

@@ -63,9 +63,9 @@ function isAttributeVisible(element: Element, childElement?: Element) {
*/
export function isElementVisible(element: Element, childElement?: Element): boolean {
if (supportsCheckVisibility) {
return element.checkVisibility();
return element.checkVisibility() && !element.closest('[data-react-aria-prevent-focus]');
Copy link
Member Author

Choose a reason for hiding this comment

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

not convinced this is where the check should be given the name of the function vs the name of the attribute...

Copy link
Member

Choose a reason for hiding this comment

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

yeah this is a bit confusing cuz of the naming, but if I understand this correctly, this is to make it so isTabbable/isFocusable don't resolve as true for elements with the above data attribute correct? Any reason we don't move this check into those functions?

Copy link
Member Author

Choose a reason for hiding this comment

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

It'd be annoying to do it there because you have to check all the parents as well. I think it's ok here for now

@rspbot
Copy link

rspbot commented Jul 26, 2025

@rspbot
Copy link

rspbot commented Jul 26, 2025

@rspbot
Copy link

rspbot commented Jul 26, 2025

@snowystinger snowystinger added this pull request to the merge queue Aug 6, 2025
Merged via the queue into main with commit 155e361 Aug 7, 2025
33 checks passed
@snowystinger snowystinger deleted the fix-toolbar-focus branch August 7, 2025 00:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Select in Toolbar breaks keyboard navigation
4 participants