Add focus tracking support for shadow dom #5983
Conversation
…/react-spectrum into ritesh/focus-ring-iframe
A new 'ShadowRoot' example is added in the useFocusRing.stories.tsx under the @react-aria/interactions package. The getOwnerDocument function in domHelpers.ts is also updated to return either a Document or a ShadowRoot, depending on the context. This helps illustrate focus management within Shadow DOM contexts.
The commit replaces the use of getOwnerDocument with getRootNode function in the FocusScope.tsx file. This change modifies how the active element is retrieved and how event listeners are added and removed, leading to better management of the focus scope. Additionally, getRootNode function has been expanded to handle Shadow DOM.
…into shadow-dom
The function 'isElementInScope' in FocusScope.tsx has been updated to accept 'ShadowRoot' as an additional possible type for the 'element' parameter. This allows compatibility with more potential focusing scenarios.
snowystinger
changed the title
|
Thanks for the PR, I see it's failing Typescript right now. I also started to do an initial review, however, I don't understand the changes in this commit:
Can you explain more about the changes in this commit? What was going "wrong" before the commit? Do we need tests for it? |
|
@snowystinger Thanks for reviewing. You can pause the review for now. We will get back to working on this PR or create a new one this week. |
…nd get correct active element. - Make `getFocusableTreeWalker` compatible with shadow root. - Update `getOwnerWindow`. - Fix `useFocus` - `useFocusVisible` - `useInteractionOutside` - `usePress`. - Utilize `getDeepActiveElement`. - Update usage of `e.target` in `useOverlay` to use `composedPath`.
|
Closing this in favour of #6046 |
3 participants
Part of #1472
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: