Focus Management within Shadow DOM #6046

MahmoudElsayad · 2024-03-11T21:20:34Z

Closes #1472

This PR enhances focus management capabilities in React Spectrum applications when used within Shadow DOM environments.

Changes

Introduced a new utility function getRootNode, designed to return a given element's contextually appropriate root (Document or ShadowRoot). This improves the library's ability to query and manipulate focus within shadow DOMs.
Added Shadow DOM support to the following:
- FocusScope
- useFocus
- useFocusVisible
- useFocusWithin
- useInteractionOutside
- usePress
Implemented a new utility function, getRootBody that determines the effective "body" element for an event's propagation path, supporting both Shadow DOM and traditional document structures.
implemented a new utility, ' getDeepActiveElement,` which retrieves the currently focused element across Shadow DOM boundaries, ensuring accurate focus management in complex DOM structures.
Added tests for all new utility functions and affected hooks/components.

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

Open any storybook example that uses any of the affected hooks/components
Test the functionality and make sure it works when the story is encapsulated inside a shadow root.

// custom wrapper to run any story inside a shadow root
function ShadowDomWrapper({ children }) {
  const container = useRef(null);

  useEffect(() => {
    const _container = container.current;
    if (!_container) return;

    const div = document.createElement('div');
    _container.appendChild(div);

    const shadowRoot = div.attachShadow({ mode: 'open' });
    const main = document.createElement('main');
    shadowRoot.appendChild(main);

    // Wrap children with the ThemeProvider when rendering
    ReactDOM.render(
      children,
      main
    );

    return () => {
      ReactDOM.unmountComponentAtNode(main);
      if (_container) {
        _container.innerHTML = '';
      }
    };
  }, [children]);

  return <div ref={container} />;
}

// .storybook/preview.js
export const decorators = [
+    (Story) => (
+     <ShadowDomWrapper>
+        <Story />
+      </ShadowDomWrapper>
+    ),
  withScrollingSwitcher,
  ...(process.env.NODE_ENV !== 'production' ? [withStrictModeSwitcher] : []),
  withProviderSwitcher
];

🧢 Your Project:

PSPDFKit -

Update domHelpers.test.js.

Add Tests for FocusScope.test.js. New helper util `getRootBody`.

Fix `useRestoreFocus` issue. Add new DOM util `getDeepActiveElement`.

… navigation example`.

update `useFocus` - `useFocusWithin` - `usePress`.

Test for `focusSafely`.

ritz078 · 2024-03-18T11:06:03Z

@snowystinger We are working on fixing the linting and type errors but if you want you can give an early eye to this PR.

davidferguson · 2024-05-03T19:23:34Z

Hi @MahmoudElsayad, I did spend some time looking into this, and fixing it for the use cases that we needed.

I'm attaching a patch file in the hope it may be useful for you. This is based off 3.34.1, so not the current main, or your PR, but it should be similar to apply. It makes overlays (menus, dialogs) and toasts and landmarks functional for our use case.

overlay-toast-fixes.patch.txt

@yihuiliao and @snowystinger, is there a preferred approach of how you'd like to see webcomponent & React Spectrum support progress? Is working on small individual fixes like @MahmoudElsayad's work, and now my overlay work the way forward, or are you hoping for a more holistic, comprehensive approach that updates the entire library at once?

MahmoudElsayad · 2024-05-07T02:06:13Z

@davidferguson Thank you for the patch! I think the way to go would be in small individual fixes; it will be great if you open a PR for the patch changes as well, and you can branch off this PR if you find any useful utility that can be used and that way, we add support incrementally for shadow DOM.

@yihuiliao and @snowystinger, Your feedback would be greatly appreciated to move things forward.

MahmoudElsayad · 2024-05-09T14:04:24Z

@davidferguson One issue related to overlays, which I don't know if you have encountered yet or not, and that arose from accessibility testing, is that the ariaHideOutside function sets aria-hidden="true" on the document body, which is incorrectly inherited by elements within the shadow root making all overlays inherit aria-hidden="true".

It's been handled in #6133; I am working on it getting the PR ready for review as well.

ritz078 · 2024-05-21T09:44:33Z

@snowystinger @yihuiliao Can you have a look at this PR and suggest if there is something more that needs to be done ?

snowystinger · 2024-05-21T10:43:46Z

We've had some other priorities. How ready is this PR for a review? I'll try to find some time this week to look at it again.

snowystinger · 2024-05-21T21:46:21Z

It looks like there are some tests failing, do you need assistance figuring them out?

MahmoudElsayad · 2024-05-21T22:33:11Z

@snowystinger I fixed the failing tests in the last commit.

MahmoudElsayad · 2024-05-21T22:53:08Z

@snowystinger Sorry, the last commit doesn't handle versions 16 and 17, so I am adjusting the fix slightly; I am working on it now.

MahmoudElsayad · 2024-05-22T01:15:20Z

@snowystinger They are fixed now.

snowystinger · 2024-05-23T07:16:24Z

GET_BUILD

rspbot · 2024-05-23T07:38:36Z

Build successful! 🎉

rspbot · 2024-05-23T07:38:39Z

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }

@react-aria/focus

getFocusableTreeWalker

 getFocusableTreeWalker {
-  root: Element
+  root: Element | ShadowRoot
   opts?: FocusManagerOptions
   scope?: Array<Element>
   returnVal: undefined
 }

@react-aria/utils

useFormReset

-
+getRootNode {
+  el: Element | null | undefined
+  returnVal: undefined
+}

getRootNode

-
+getRootBody {
+  root: Document | ShadowRoot
+  returnVal: undefined
+}

getRootBody

-
+getDeepActiveElement {
+  returnVal: undefined
+}

snowystinger

Got through tests today, I'll look more at the logic tomorrow hopefully.

@davidferguson

is there a preferred approach of how you'd like to see webcomponent & React Spectrum support progress

What would be best would be to understand the use case we're aiming to support. If you could provide information about your architecture and how you actually make use of shadowDOM, that'd be helpful. That way we can keep an eye out for potential pitfalls. Maybe an example app on github or in a codesandbox? (be mindful of what you make public though, you can reach out internally if it's sensitive)

Otherwise, a holistic approach is always good, but the work can be done in smaller chunks for ease of reviewing.

packages/@react-aria/interactions/test/usePress.test.js

snowystinger · 2024-05-28T04:21:33Z

packages/@react-aria/focus/test/focusSafely.test.js

 import {setInteractionModality} from '@react-aria/interactions';

+function createShadowRoot() {


can use the util you created?

snowystinger · 2024-05-28T04:37:21Z

packages/@react-aria/utils/src/domHelpers.ts

+  return doc instanceof ShadowRoot ?  doc.ownerDocument.defaultView || window :  doc.defaultView || window;
+};
+
+export const getRootNode = (el: Element | null | undefined): Document | ShadowRoot => {


if the element is disconnected, it seems like we should return null? I see your comment about consistency, but where has this mattered that you needed this behavior?

packages/@react-aria/utils/src/domHelpers.ts

snowystinger · 2024-05-28T05:27:08Z

packages/@react-aria/interactions/test/usePress.test.js

+      cleanupShadowRoot = shadowRoot;
+      cleanupShadowHost = shadowHost;


snowystinger · 2024-05-28T05:40:48Z

packages/@react-aria/interactions/test/usePress.test.js

+      const el = shadowRoot.getElementById('testElement');
+      fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, pointerType: 'mouse'}));
+      fireEvent(el, pointerEvent('pointerup', {pointerId: 1, pointerType: 'mouse', clientX: 0, clientY: 0}));
+      expect(document.activeElement).not.toBe(el);


need to check getDeepActiveElement? or that the activeElement isn't the shadowRoot at least?

snowystinger · 2024-05-28T05:55:48Z

packages/@react-aria/interactions/test/usePress.test.js

+      expect(allowDefault).toBe(false);
+    });
+
+    it('should still prevent default when pressing on a non draggable + pressable item in a draggable container', function () {


difference between this test and the one above it?

snowystinger · 2024-05-28T06:05:30Z

packages/@react-aria/interactions/test/useInteractOutside.test.js

+    );
+
+    // Wait for dynamic element to be added
+    setTimeout(() => {


useFakeTimers, then run them just after this setTimeout, that way there's no danger of the assertions running after the test has completed

snowystinger · 2024-05-28T06:14:17Z

packages/@react-aria/interactions/test/useFocus.test.js

+      const {shadowRoot, shadowHost} = createShadowRoot();
+      const events = [];
+      const ExampleComponent = () => (
+        <Example
+          onFocus={(e) => events.push({type: 'focus', target: e.target})}
+          onBlur={(e) => events.push({type: 'blur', target: e.target})}
+          onFocusChange={isFocused => events.push({type: 'focuschange', isFocused})} />
+      );
+
+      let root;
+      act(() => {
+        root = reactDomRenderer(<ExampleComponent />, shadowRoot);
+      });


I think you could restructure these and drop the reactDomRenderer if you did something along these lines

const {shadowRoot, shadowHost} = createShadowRoot(); const ExampleComponent = () => ReactDOM.createPortal( <Example onFocus={(e) => events.push({type: 'focus', target: e.target})} onBlur={(e) => events.push({type: 'blur', target: e.target})} onFocusChange={isFocused => events.push({type: 'focuschange', isFocused})} />, shadowRoot ); let root = render(<ExampleComponent />);

Might also allow you to get rid of the extra act and it gives you a cleanup function on the react tree. It might also solve the setTimeout(..., 0) you have in here too

Unless the distinction of having the react root being inside the shadow dom matters?

Co-authored-by: Robert Snow <snowystinger@gmail.com>

snowystinger

I noticed that FocusManager cannot move focus between shadow roots

it('should move focus forward across ShadowDOMs', async function () {
    let shadowRoot, unmount;
    let shadowRoot2, unmount2;
    function Test() {
      let ref = useRef(null);
      let [mounted, setMounted] = useState(false);
      let refCallback = useCallback((val) => {
        ref.current = val;
        setMounted(true);
        if (shadowRoot) {
          unmount();
        }
        if (shadowRoot2) {
          unmount2();
        }
        if (val) {
          let rv = createShadowRoot(val);
          let rv2 = createShadowRoot(val);
          shadowRoot = rv.shadowRoot;
          shadowRoot2 = rv2.shadowRoot;
          unmount = rv.unmount;
          unmount2 = rv2.unmount;
        }
      }, []);
      return (
        <div ref={refCallback}>
          <FocusScope>
            <Item data-testid="item1" />
            {mounted && ReactDOM.createPortal(<Item data-testid="item2" />, shadowRoot)}
            {mounted && ReactDOM.createPortal(<Item data-testid="item3" />, shadowRoot2)}
          </FocusScope>
        </div>
      );
    }

    function Item(props) {
      let focusManager = useFocusManager();
      let onClick = () => {
        focusManager.focusNext();
      };
      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
      return <div {...props} tabIndex={-1} role="button" onClick={onClick} />;
    }

    let {getByTestId} = render(<Test />);
    let item1 = getByTestId('item1');
    let item2 = shadowRoot.querySelector('[data-testid="item2"]');
    let item3 = shadowRoot2.querySelector('[data-testid="item3"]');

    act(() => {item1.focus();});

    await user.click(item1);
    expect(getDeepActiveElement()).toBe(item2);

    await user.click(item2);
    expect(getDeepActiveElement()).toBe(item3);

    await user.click(item3);
    expect(getDeepActiveElement()).toBe(item3);
  });

I assume it's because of

react-spectrum/packages/@react-aria/focus/src/FocusScope.tsx

Line 203 in d7fc932

let walker = getFocusableTreeWalker(scopeRoot, {tabbable, accept}, scope);

and that the tree walker won't go into a shadowroot, so you'll have to recurse into them yourself. It may be easier to build it into getFocusableTreeWalker and return an interface that matches the tree walker.

Likewise, restoring across shadowroots is going to be problematic with any checks for contains.

See comments from #1472 (comment) for more things to keep an eye out for

I don't think we said there'd only be one shadowroot at the root of the entire application, so I'm assuming sibling/disjointed and nested are both valid.

snowystinger · 2024-05-29T00:06:31Z

packages/@react-aria/focus/src/FocusScope.tsx

@@ -133,7 +133,8 @@ export function FocusScope(props: FocusScopeProps) {
  // This needs to be an effect so that activeScope is updated after the FocusScope tree is complete.
  // It cannot be a useLayoutEffect because the parent of this node hasn't been attached in the tree yet.
  useEffect(() => {
-    const activeElement = getOwnerDocument(scopeRef.current ? scopeRef.current[0] : undefined).activeElement;
+    // eslint-disable-next-line no-undef


snowystinger · 2024-05-29T00:10:15Z

packages/@react-aria/utils/src/domHelpers.ts

@@ -9,6 +9,50 @@ export const getOwnerWindow = (
    return el;
  }

-  const doc = getOwnerDocument(el as Element | null | undefined);
-  return doc.defaultView || window;
+  const doc = getRootNode(el as Element | null | undefined);


I think this cast is wrong, getRootNode should be expanded to cover the Window case

snowystinger · 2024-05-29T00:16:31Z

packages/@react-aria/focus/test/FocusScope.test.js

+
+  /**
+   * Test case: https://github.com/adobe/react-spectrum/issues/1472
+   * sandbox example: https://codesandbox.io/p/sandbox/vigilant-hofstadter-3wf4i?file=%2Fsrc%2Findex.js%3A28%2C30


sandbox link seems bad, I can't even get this one to load, maybe omit and just keep link to the github issue

Suggested change

* sandbox example: https://codesandbox.io/p/sandbox/vigilant-hofstadter-3wf4i?file=%2Fsrc%2Findex.js%3A28%2C30

* sandbox example: https://codesandbox.io/s/vigilant-hofstadter-3wf4i?file=/src/index.js

MahmoudElsayad added 6 commits March 11, 2024 23:12

Add getRootNode utility.

c026270

Update getRootNode util.

9299cee

Update domHelpers.test.js.

Update getOwnerWindow util.

71836e3

Add tests for Shadow DOM handling using getRootNode.

10893b9

Update comment.

5f81d34

Fix FocusScope.tsx in Shadow DOM.

bfb9429

Add Tests for FocusScope.test.js. New helper util `getRootBody`.

ritz078 mentioned this pull request Mar 12, 2024

Add focus tracking support for shadow dom #5983

Closed

5 tasks

MahmoudElsayad and others added 16 commits March 12, 2024 22:15

Add more test for FocusScope.test.js.

3448ed7

Fix `useRestoreFocus` issue. Add new DOM util `getDeepActiveElement`.

Fix another useRestoreFocus issue with restoring focus in `Keyboard…

0c07404

… navigation example`.

Add tests for getDeepActiveElement

90906bf

Add useFocus shadow DOM tests.

314fc44

update `useFocus` - `useFocusWithin` - `usePress`.

Update focusSafely.

9cb6c5a

Test for `focusSafely`.

Update useInteractionOutside for Shadow DOM support.

67399bb

Update useFocusVisible for Shadow DOM support.

59c3705

Add useInteractOutside tests.

3c85408

Add test for use case mentioned in issue adobe#1472.

61ba1b0

Add tests for usePress hook.

75d7fa5

Update the fix for useInteractOutside to use simpler one.

db45ef4

Update useOverlay to use composedPath.

f9b94a3

Tests refactor.

758575c

Revert useOverlay changes as it works correctly without these changes.

25ef5c5

Fix types.

0d4f70e

Merge branch 'main' into shadow-dom-enhancement-1-getRootNode

3cf2091

MahmoudElsayad marked this pull request as ready for review March 18, 2024 02:53

MahmoudElsayad added 3 commits March 18, 2024 05:09

Fix types.

1d8c439

lint.

e5dbda1

lint.

ae7b76e

MahmoudElsayad added 2 commits March 19, 2024 19:26

Fix failing tests.

aea5d8d

Fix failing tests.

f2ca9b7

Merge branch 'main' into shadow-dom-enhancement-1-getRootNode

a319991

MahmoudElsayad added 3 commits May 7, 2024 05:17

Fix tests.

dc2231d

Fix tests?

bd536b6

Fix tests?

f1aa64a

MahmoudElsayad added 2 commits May 9, 2024 17:04

Merge branch 'main' into shadow-dom-enhancement-1-getRootNode

6426c08

Merge branch 'main' into shadow-dom-enhancement-1-getRootNode

7cafb6a

Fix tests.

1a3e068

MahmoudElsayad and others added 5 commits May 22, 2024 02:20

Fix tests.?

f1fe364

Fix tests.?

24550d6

Fix tests.?

b9a11ee

Fix tests.?

97d73f2

Merge branch 'main' into shadow-dom-enhancement-1-getRootNode

720ee18

Merge branch 'main' into shadow-dom-enhancement-1-getRootNode

6f80dbc

Merge branch 'main' into shadow-dom-enhancement-1-getRootNode

6ca6996

snowystinger reviewed May 28, 2024

View reviewed changes

MahmoudElsayad and others added 2 commits May 28, 2024 12:42

Apply suggestions from code review

1f6ecf3

Co-authored-by: Robert Snow <snowystinger@gmail.com>

Update packages/@react-aria/interactions/test/usePress.test.js

13278d9

Co-authored-by: Robert Snow <snowystinger@gmail.com>

snowystinger reviewed May 29, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Focus Management within Shadow DOM #6046

Focus Management within Shadow DOM #6046

MahmoudElsayad commented Mar 11, 2024 •

edited

ritz078 commented Mar 18, 2024

davidferguson commented May 3, 2024

MahmoudElsayad commented May 7, 2024

MahmoudElsayad commented May 9, 2024

ritz078 commented May 21, 2024

snowystinger commented May 21, 2024

snowystinger commented May 21, 2024

MahmoudElsayad commented May 21, 2024

MahmoudElsayad commented May 21, 2024

MahmoudElsayad commented May 22, 2024

snowystinger commented May 23, 2024

rspbot commented May 23, 2024

rspbot commented May 23, 2024

snowystinger left a comment

snowystinger May 28, 2024

snowystinger May 28, 2024

snowystinger May 28, 2024

snowystinger May 28, 2024

snowystinger May 28, 2024

snowystinger May 28, 2024

snowystinger May 28, 2024

snowystinger left a comment

snowystinger May 29, 2024

snowystinger May 29, 2024

snowystinger May 29, 2024

		import {setInteractionModality} from '@react-aria/interactions';

		function createShadowRoot() {

		cleanupShadowRoot = shadowRoot;
		cleanupShadowHost = shadowHost;

	* sandbox example: https://codesandbox.io/p/sandbox/vigilant-hofstadter-3wf4i?file=%2Fsrc%2Findex.js%3A28%2C30
	* sandbox example: https://codesandbox.io/s/vigilant-hofstadter-3wf4i?file=/src/index.js

Focus Management within Shadow DOM #6046

Are you sure you want to change the base?

Focus Management within Shadow DOM #6046

Conversation

MahmoudElsayad commented Mar 11, 2024 • edited

Changes

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

ritz078 commented Mar 18, 2024

davidferguson commented May 3, 2024

MahmoudElsayad commented May 7, 2024

MahmoudElsayad commented May 9, 2024

ritz078 commented May 21, 2024

snowystinger commented May 21, 2024

snowystinger commented May 21, 2024

MahmoudElsayad commented May 21, 2024

MahmoudElsayad commented May 21, 2024

MahmoudElsayad commented May 22, 2024

snowystinger commented May 23, 2024

rspbot commented May 23, 2024

rspbot commented May 23, 2024

@react-aria/focus

getFocusableTreeWalker

@react-aria/utils

useFormReset

getRootNode

getRootBody

snowystinger left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snowystinger left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MahmoudElsayad commented Mar 11, 2024 •

edited