-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Conversation
@@ -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]'); |
There was a problem hiding this comment.
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...
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
Build successful! 🎉 |
Build successful! 🎉 |
Build successful! 🎉 |
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:
📝 Test Instructions:
🧢 Your Project: