test: adds ShadowDOM / UNSAFE_PortalProvider tests

package.json

@@ -297,5 +297,8 @@
   },
   "locales": [
     "en-US"
-  ]
+  ],
+  "dependencies": {
+    "shadow-dom-testing-library": "^1.13.1"
+  }
 }

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

@@ -19,6 +19,7 @@ import {
   isChrome,
   isFocusable,
   isTabbable,
+  nodeContains,
   ShadowTreeWalker,
   useLayoutEffect
 } from '@react-aria/utils';
@@ -440,7 +441,7 @@ function isElementInScope(element?: Element | null, scope?: Element[] | null) {
   if (!scope) {
     return false;
   }
-  return scope.some(node => node.contains(element));
+  return scope.some(node => nodeContains(node, element));
 }
 
 function isElementInChildScope(element: Element, scope: ScopeRef = null) {
@@ -771,7 +772,7 @@ export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions
     {
       acceptNode(node) {
         // Skip nodes inside the starting node.
-        if (opts?.from?.contains(node)) {
+        if (opts?.from && nodeContains(opts.from, node)) {
           return NodeFilter.FILTER_REJECT;
         }
 
@@ -822,7 +823,7 @@ export function createFocusManager(ref: RefObject<Element | null>, defaultOption
       let {from, tabbable = defaultOptions.tabbable, wrap = defaultOptions.wrap, accept = defaultOptions.accept} = opts;
       let node = from || getActiveElement(getOwnerDocument(root));
       let walker = getFocusableTreeWalker(root, {tabbable, accept});
-      if (root.contains(node)) {
+      if (nodeContains(root, node)) {
         walker.currentNode = node!;
       }
       let nextNode = walker.nextNode() as FocusableElement;
@@ -843,7 +844,7 @@ export function createFocusManager(ref: RefObject<Element | null>, defaultOption
       let {from, tabbable = defaultOptions.tabbable, wrap = defaultOptions.wrap, accept = defaultOptions.accept} = opts;
       let node = from || getActiveElement(getOwnerDocument(root));
       let walker = getFocusableTreeWalker(root, {tabbable, accept});
-      if (root.contains(node)) {
+      if (nodeContains(root, node)) {
         walker.currentNode = node!;
       } else {
         let next = last(walker);

packages/@react-aria/interactions/src/useFocusWithin.ts

@@ -54,14 +54,14 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
 
   let onBlur = useCallback((e: FocusEvent) => {
     // Ignore events bubbling through portals.
-    if (!e.currentTarget.contains(e.target)) {
+    if (!nodeContains(e.currentTarget as Element, e.target as Element)) {
       return;
     }
 
     // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
     // when moving focus inside the element. Only trigger if the currentTarget doesn't
     // include the relatedTarget (where focus is moving).
-    if (state.current.isFocusWithin && !(e.currentTarget as Element).contains(e.relatedTarget as Element)) {
+    if (state.current.isFocusWithin && !nodeContains(e.currentTarget as Element, e.relatedTarget as Element)) {
       state.current.isFocusWithin = false;
       removeAllGlobalListeners();
 
@@ -78,7 +78,7 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
   let onSyntheticFocus = useSyntheticBlurEvent(onBlur);
   let onFocus = useCallback((e: FocusEvent) => {
     // Ignore events bubbling through portals.
-    if (!e.currentTarget.contains(e.target)) {
+    if (!nodeContains(e.currentTarget as Element, e.target as Element)) {
       return;
     }
 

packages/@react-aria/interactions/src/useInteractOutside.ts

@@ -15,7 +15,7 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {getOwnerDocument, useEffectEvent} from '@react-aria/utils';
+import {getOwnerDocument, nodeContains, useEffectEvent} from '@react-aria/utils';
 import {RefObject} from '@react-types/shared';
 import {useEffect, useRef} from 'react';
 
@@ -121,7 +121,7 @@ function isValidEvent(event, ref) {
   if (event.target) {
     // if the event target is no longer in the document, ignore
     const ownerDocument = event.target.ownerDocument;
-    if (!ownerDocument || !ownerDocument.documentElement.contains(event.target)) {
+    if (!ownerDocument || !nodeContains(ownerDocument.documentElement, event.target)) {
       return false;
     }
     // If the target is within a top layer element (e.g. toasts), ignore.

packages/@react-aria/overlays/src/ariaHideOutside.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {getOwnerWindow} from '@react-aria/utils';
+import {createShadowTreeWalker, getOwnerDocument, getOwnerWindow, nodeContains} from '@react-aria/utils';
 const supportsInert = typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
 
 interface AriaHideOutsideOptions {
@@ -85,16 +85,19 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt
 
       // Skip this node but continue to children if one of the targets is inside the node.
       for (let target of visibleNodes) {
-        if (node.contains(target)) {
+        if (nodeContains(node, target)) {
           return NodeFilter.FILTER_SKIP;
         }
       }
 
       return NodeFilter.FILTER_ACCEPT;
     };
 
-    let walker = document.createTreeWalker(
-      root,
+    let rootElement = root?.nodeType === Node.ELEMENT_NODE ? (root as Element) : null;
+    let doc = getOwnerDocument(rootElement);
+    let walker = createShadowTreeWalker(
+      doc,
+      root || doc,
       NodeFilter.SHOW_ELEMENT,
       {acceptNode}
     );
@@ -147,7 +150,7 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt
 
       // If the parent element of the added nodes is not within one of the targets,
       // and not already inside a hidden node, hide all of the new children.
-      if (![...visibleNodes, ...hiddenNodes].some(node => node.contains(change.target))) {
+      if (![...visibleNodes, ...hiddenNodes].some(node => nodeContains(node, change.target as Element))) {
         for (let node of change.addedNodes) {
           if (
             (node instanceof HTMLElement || node instanceof SVGElement) &&

packages/@react-aria/utils/src/shadowdom/DOMFunctions.ts

@@ -61,7 +61,7 @@ export const getActiveElement = (doc: Document = document): Element | null => {
  * ShadowDOM safe version of event.target.
  */
 export function getEventTarget<T extends Event>(event: T): Element {
-  if (shadowDOM() && (event.target as HTMLElement).shadowRoot) {
+  if (shadowDOM() && (event.target as HTMLElement)?.shadowRoot) {
     if (event.composedPath) {
       return event.composedPath()[0] as Element;
     }

packages/react-aria-components/src/Popover.tsx

@@ -20,7 +20,7 @@ import {
   useContextProps,
   useRenderProps
 } from './utils';
-import {filterDOMProps, mergeProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, nodeContains, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
 import {focusSafely} from '@react-aria/interactions';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
@@ -198,7 +198,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts
   // Focus the popover itself on mount, unless a child element is already focused.
   // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger
   useEffect(() => {
-    if (isDialog && props.trigger !== 'SubmenuTrigger' && ref.current && !ref.current.contains(document.activeElement)) {
+    if (isDialog && props.trigger !== 'SubmenuTrigger' && ref.current && !nodeContains(ref.current, document.activeElement)) {
       focusSafely(ref.current);
     }
   }, [isDialog, ref, props.trigger]);

packages/react-aria-components/test/Popover.test.js

@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, pointerMap, render} from '@react-spectrum/test-utils-internal';
-import {Button, Dialog, DialogTrigger, OverlayArrow, Popover, Pressable} from '../';
+import {act, createShadowRoot, pointerMap, render} from '@react-spectrum/test-utils-internal';
+import {Button, Dialog, DialogTrigger, Menu, MenuItem, MenuTrigger, OverlayArrow, Popover, Pressable} from '../';
 import React, {useRef} from 'react';
+import {screen} from 'shadow-dom-testing-library';
 import {UNSAFE_PortalProvider} from '@react-aria/overlays';
 import userEvent from '@testing-library/user-event';
 
@@ -273,4 +274,56 @@ describe('Popover', () => {
     let dialog = getByRole('dialog');
     expect(dialog).toBeInTheDocument();
   });
+
+  it('test overlay and overlay trigger inside the same shadow root to have interactable content', async function () {
+    const {shadowRoot, cleanup} = createShadowRoot();
+
+    const appContainer = document.createElement('div');
+    appContainer.setAttribute('id', 'appRoot');
+    shadowRoot.appendChild(appContainer);
+
+    const portal = document.createElement('div');
+    portal.id = 'shadow-dom-portal';
+    shadowRoot.appendChild(portal);
+
+    const onAction = jest.fn();
+    const user = userEvent.setup({delay: null, pointerMap});
+
+    function ShadowApp() {
+      return (
+        <MenuTrigger>
+          <Button>
+            Open
+          </Button>
+          <Popover>
+            <Menu onAction={onAction}>
+              <MenuItem key="new">New…</MenuItem>
+              <MenuItem key="open">Open…</MenuItem>
+              <MenuItem key="save">Save</MenuItem>
+              <MenuItem key="save-as">Save as…</MenuItem>
+              <MenuItem key="print">Print…</MenuItem>
+            </Menu>
+          </Popover>
+        </MenuTrigger>
+      );
+    }
+    render(
+      <UNSAFE_PortalProvider getContainer={() => portal}>
+        <ShadowApp />
+      </UNSAFE_PortalProvider>,
+      {container: appContainer}
+    );
+
+    let button = await screen.findByShadowRole('button');
+    await user.click(button);
+    let menu = await screen.findByShadowRole('menu');
+    expect(menu).toBeVisible();
+    let items = await screen.findAllByShadowRole('menuitem');
+    let openItem = items.find(item => item.textContent?.trim() === 'Open…');
+    expect(openItem).toBeVisible();
+
+    await user.click(openItem);
+    expect(onAction).toHaveBeenCalledTimes(1);
+    cleanup();
+  });
 });

yarn.lock

@@ -26677,6 +26677,7 @@ __metadata:
     recursive-readdir: "npm:^2.2.2"
     regenerator-runtime: "npm:0.13.3"
     rimraf: "npm:^2.6.3"
+    shadow-dom-testing-library: "npm:^1.13.1"
     sharp: "npm:^0.33.5"
     sinon: "npm:^7.3.1"
     storybook: "npm:^8.6.14"
@@ -28055,6 +28056,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shadow-dom-testing-library@npm:^1.13.1":
+  version: 1.13.1
+  resolution: "shadow-dom-testing-library@npm:1.13.1"
+  peerDependencies:
+    "@testing-library/dom": ">= 8"
+  checksum: 10c0/cd0a5e7799f868af665235d0812bdbcfbfe4461681ef35ce0fba4d460d395f3fa0e95df5c8fec4686ba30286a62c4e7ba48013e67646977726aa13363479d70f
+  languageName: node
+  linkType: hard
+
 "shallow-clone@npm:^3.0.0":
   version: 3.0.1
   resolution: "shallow-clone@npm:3.0.1"