feat: Focus Management within ShadowDOM (#6046)
* Add `getRootNode` utility.
* Update `getRootNode` util.
Update domHelpers.test.js.
* Update `getOwnerWindow` util.
* Add tests for Shadow DOM handling using `getRootNode`.
* Update comment.
* Fix FocusScope.tsx in Shadow DOM.
Add Tests for FocusScope.test.js.
New helper util `getRootBody`.
* Add more test for FocusScope.test.js.
Fix `useRestoreFocus` issue.
Add new DOM util `getDeepActiveElement`.
* Fix another `useRestoreFocus` issue with restoring focus in `Keyboard navigation example`.
* Add tests for `getDeepActiveElement`
* Add `useFocus` shadow DOM tests.
update `useFocus` - `useFocusWithin` - `usePress`.
* Update `focusSafely`.
Test for `focusSafely`.
* Update `useInteractionOutside` for Shadow DOM support.
* Update `useFocusVisible` for Shadow DOM support.
* Add `useInteractOutside` tests.
* Add test for use case mentioned in issue #1472.
* Add tests for `usePress` hook.
* Update the fix for `useInteractOutside` to use simpler one.
* Update `useOverlay` to use composedPath.
* Tests refactor.
* Revert `useOverlay` changes as it works correctly without these changes.
* Fix types.
* Fix types.
* lint.
* lint.
* Fix failing tests.
* Fix failing tests.
* Fix failing tests.
* Test CI
* Test CI
* Fix shadow DOM tests
* Fix shadow DOM tests.
* Fix CI?
* Fix CI?
* Fix CI?
* Re-add commented test.
* Update `getRootNode` to handle iframes as well, and everything that `getOwnerDocument` used to handle.
* Fix tests.
* Fix tests?
* Fix tests?
* Fix tests.
* Fix tests.?
* Fix tests.?
* Fix tests.?
* Fix tests.?
* Apply suggestions from code review
Co-authored-by: Robert Snow <snowystinger@gmail.com>
* Update packages/@react-aria/interactions/test/usePress.test.js
Co-authored-by: Robert Snow <snowystinger@gmail.com>
* - Update tests to use `createShadowRoot` util.
- Update `getRootNode` to return null for disconnected nodes.
- Update `usePress.test.js` shadow DOM test.
- Test getting rid of reactDomRenderer.
* - Update tests and remove reactCompat.
* - Leftover.
* - Revert changes to getFocusableTreeWalker.
* - Remove casting.
* - return null in case element is disconnected in `getRootNode`.
* - Casting.
* - Update unit test.
* - Handle focus movements between shadow DOMs.
* - TS fixes.
* Update usePress.test.js
* Refactors and TS errors.
* Update fix.
* Remove broken sandbox link.
* Refactor `getRootNode` to improve root node handling.
* Use `getDeepActiveElement` inside focusSafely.ts to get the active element.
* Refactor event listener registration
Introduce `createEventListener` function to streamline event listener registration. This enhances readability and maintainability, ensuring consistency across event handling logic.
* Remove `ownerDocument` fallback in usePress.ts
* Refactor `createEventListener` for type-safe caching.
* - Test out the updated getOwnerWindow to fix iframe focus issues.
* - Test out the updated getOwnerWindow to fix iframe focus issues.
* - Test?
* - Revert Focus scope changes, for testing.
* - Fix tests?
* - Fix tests?
* - Fix tests?
* - Revert the changes to getRootNode.
* - Revert `isElementInScope` as well.
* - Test out if instance check failure across context for iframes is what is causing the issue.
* - Replace the use of `instanceof` with `nodeType` to correctly identify the node type across contexts.
- Revert changes made for `usePress`.
* - Fix ESlint errors.
* - Update the usages of `instanceof` to use `nodeType` instead.
* Update packages/@react-aria/interactions/src/useFocusVisible.ts
Co-authored-by: Robert Snow <snowystinger@gmail.com>
* - Update the usages of `instanceof` to use `nodeType` instead.
- Introduce new helpers `isShadowRoot` and `isDocument`.
* - Lint.
* - Lint.
* - Update `getDeepActiveElement` to accept an optional document or shadowRoot.
- Fix an issue where opening any popover, the focus wasn't restored to the trigger element in shadow DOM.
* - Add extra unit test for `getDeepActiveElement`.
* - Update `getDeepActiveElement` to always rely on `getRootNode`.
* - Update `getDeepActiveElement` to always rely on `getRootNode`.
* refactor usePress to still have global listeners for cleanup across boundaries
* fix lint and test
* restore remaining document level listeners
* fix tests
* fix lint
* simplify
* Update packages/@react-aria/focus/src/FocusScope.tsx
* fix autofocus
* minor test updates to preserve test intent
* review comments
* fix esm test
* fix lint
* check in speed tests
* fix lint
* Add feature flag and fix a couple probable bugs
* Update NOTICE.txt
---------
Co-authored-by: Ritesh Kumar <ritz078@users.noreply.github.com>
Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Robert Snow <snowystinger@gmail.com>
Co-authored-by: Daniel Lu <dl1644@gmail.com>