react-spectrum
c78b2483 - feat: Focus Management within ShadowDOM (#6046)

Commit
214 days ago
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>
Parents
Loading