Add feature flag and fix a couple probable bugs

Author: snowystinger

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

@@ -13,6 +13,7 @@
 import {
   createShadowTreeWalker,
   getActiveElement,
+  getEventTarget,
   getOwnerDocument,
   isAndroid,
   isChrome,
@@ -342,13 +343,13 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
       }
     };
 
-    let onFocus = (e) => {
+    let onFocus: EventListener = (e) => {
       // If focusing an element in a child scope of the currently active scope, the child becomes active.
       // Moving out of the active scope to an ancestor is not allowed.
-      if ((!activeScope || isAncestorScope(activeScope, scopeRef)) && isElementInScope(e.target, scopeRef.current)) {
+      if ((!activeScope || isAncestorScope(activeScope, scopeRef)) && isElementInScope(getEventTarget(e) as Element, scopeRef.current)) {
         activeScope = scopeRef;
-        focusedNode.current = e.target;
-      } else if (shouldContainFocus(scopeRef) && !isElementInChildScope(e.target, scopeRef)) {
+        focusedNode.current = getEventTarget(e) as FocusableElement;
+      } else if (shouldContainFocus(scopeRef) && !isElementInChildScope(getEventTarget(e) as Element, scopeRef)) {
         // If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
         // restore focus to the previously focused node or the first tabbable element in the active scope.
         if (focusedNode.current) {
@@ -357,11 +358,11 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
           focusFirstInScope(activeScope.current);
         }
       } else if (shouldContainFocus(scopeRef)) {
-        focusedNode.current = e.target;
+        focusedNode.current = getEventTarget(e) as FocusableElement;
       }
     };
 
-    let onBlur = (e) => {
+    let onBlur: EventListener = (e) => {
       // Firefox doesn't shift focus back to the Dialog properly without this
       if (raf.current) {
         cancelAnimationFrame(raf.current);
@@ -377,8 +378,9 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
         let activeElement = getActiveElement(ownerDocument);
         if (!shouldSkipFocusRestore && activeElement && shouldContainFocus(scopeRef) && !isElementInChildScope(activeElement, scopeRef)) {
           activeScope = scopeRef;
-          if (e.target.isConnected) {
-            focusedNode.current = e.target;
+          let target = getEventTarget(e) as FocusableElement;
+          if (target && target.isConnected) {
+            focusedNode.current = target;
             focusedNode.current?.focus();
           } else if (activeScope.current) {
             focusFirstInScope(activeScope.current);
@@ -521,7 +523,7 @@ function useActiveScopeTracker(scopeRef: RefObject<Element[] | null>, restore?:
     const ownerDocument = getOwnerDocument(scope ? scope[0] : undefined);
 
     let onFocus = (e) => {
-      let target = e.target as Element;
+      let target = getEventTarget(e) as Element;
       if (isElementInScope(target, scopeRef.current)) {
         activeScope = scopeRef;
       } else if (!isElementInAnyScope(target)) {
@@ -735,7 +737,7 @@ function restoreFocusToElement(node: FocusableElement) {
  * Create a [TreeWalker]{@link https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker}
  * that matches all focusable/tabbable elements.
  */
-export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions, scope?: Element[]): ShadowTreeWalker {
+export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions, scope?: Element[]): ShadowTreeWalker | TreeWalker {
   let filter = opts?.tabbable ? isTabbable : isFocusable;
 
   // Ensure that root is an Element or fall back appropriately
@@ -863,7 +865,7 @@ export function createFocusManager(ref: RefObject<Element | null>, defaultOption
   };
 }
 
-function last(walker: ShadowTreeWalker) {
+function last(walker: ShadowTreeWalker | TreeWalker) {
   let next: FocusableElement | undefined = undefined;
   let last: FocusableElement;
   do {

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

@@ -13,6 +13,7 @@
 import {act, createShadowRoot, fireEvent, pointerMap, render, waitFor} from '@react-spectrum/test-utils-internal';
 import {defaultTheme} from '@adobe/react-spectrum';
 import {DialogContainer} from '@react-spectrum/dialog';
+import {enableShadowDOM} from '@react-stately/flags';
 import {FocusScope, useFocusManager} from '../';
 import {focusScopeTree} from '../src/FocusScope';
 import {Provider} from '@react-spectrum/provider';
@@ -1723,6 +1724,7 @@ describe('FocusScope with Shadow DOM', function () {
   let user;
 
   beforeAll(() => {
+    enableShadowDOM();
     user = userEvent.setup({delay: null, pointerMap});
   });
 

packages/@react-aria/interactions/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@react-aria/ssr": "^3.9.7",
     "@react-aria/utils": "^3.27.0",
+    "@react-stately/flags": "^3.0.5",
     "@react-types/shared": "^3.27.0",
     "@swc/helpers": "^0.5.0"
   },

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

@@ -17,7 +17,7 @@
 
 import {DOMAttributes, FocusableElement, FocusEvents} from '@react-types/shared';
 import {FocusEvent, useCallback} from 'react';
-import {getActiveElement, getOwnerDocument} from '@react-aria/utils';
+import {getActiveElement, getEventTarget, getOwnerDocument} from '@react-aria/utils';
 import {useSyntheticBlurEvent} from './utils';
 
 export interface FocusProps<Target = FocusableElement> extends FocusEvents<Target> {
@@ -65,7 +65,7 @@ export function useFocus<Target extends FocusableElement = FocusableElement>(pro
 
     const ownerDocument = getOwnerDocument(e.target);
     const activeElement = ownerDocument ? getActiveElement(ownerDocument) : getActiveElement();
-    if (e.target === e.currentTarget && activeElement === e.target) {
+    if (e.target === e.currentTarget && activeElement === getEventTarget(e.nativeEvent)) {
       if (onFocusProp) {
         onFocusProp(e);
       }

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

@@ -17,7 +17,7 @@
 
 import {DOMAttributes} from '@react-types/shared';
 import {FocusEvent, useCallback, useRef} from 'react';
-import {getActiveElement, getOwnerDocument} from '@react-aria/utils';
+import {getActiveElement, getEventTarget, getOwnerDocument} from '@react-aria/utils';
 import {useSyntheticBlurEvent} from './utils';
 
 export interface FocusWithinProps {
@@ -73,7 +73,7 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
     // focus handler already moved focus somewhere else.
     const ownerDocument = getOwnerDocument(e.target);
     const activeElement = getActiveElement(ownerDocument);
-    if (!state.current.isFocusWithin && activeElement === e.target) {
+    if (!state.current.isFocusWithin && activeElement === getEventTarget(e.nativeEvent)) {
       if (onFocusWithin) {
         onFocusWithin(e);
       }

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

@@ -11,6 +11,7 @@
  */
 
 import {act, createShadowRoot, render, waitFor} from '@react-spectrum/test-utils-internal';
+import {enableShadowDOM} from '@react-stately/flags';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {useFocus} from '../';
@@ -156,6 +157,9 @@ describe('useFocus', function () {
   });
 
   describe('useFocus with Shadow DOM', function () {
+    beforeAll(() => {
+      enableShadowDOM();
+    });
     it('handles focus events', function () {
       const {shadowRoot, shadowHost} = createShadowRoot();
       const events = [];

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

@@ -13,6 +13,7 @@
 import {act, createShadowRoot, fireEvent, installMouseEvent, installPointerEvent, render, waitFor} from '@react-spectrum/test-utils-internal';
 import {ActionButton} from '@react-spectrum/button';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
+import {enableShadowDOM} from '@react-stately/flags';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
@@ -3809,6 +3810,7 @@ describe('usePress', function () {
     }
 
     beforeAll(() => {
+      enableShadowDOM();
       jest.useFakeTimers();
     });
 

packages/@react-aria/utils/package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@react-aria/ssr": "^3.9.7",
+    "@react-stately/flags": "^3.0.5",
     "@react-stately/utils": "^3.10.5",
     "@react-types/shared": "^3.27.0",
     "@swc/helpers": "^0.5.0",

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

@@ -1,11 +1,19 @@
 // Source: https://github.com/microsoft/tabster/blob/a89fc5d7e332d48f68d03b1ca6e344489d1c3898/src/Shadowdomize/DOMFunctions.ts#L16
 
 import {isShadowRoot} from '../domHelpers';
+import {shadowDOM} from '@react-stately/flags';
 
+/**
+ * ShadowDOM safe version of Node.contains.
+ */
 export function nodeContains(
   node: Node | null | undefined,
   otherNode: Node | null | undefined
 ): boolean {
+  if (!shadowDOM()) {
+    return otherNode && node ? node.contains(otherNode) : false;
+  }
+
   if (!node || !otherNode) {
     return false;
   }
@@ -32,7 +40,13 @@ export function nodeContains(
   return false;
 }
 
+/**
+ * ShadowDOM safe version of document.activeElement.
+ */
 export const getActiveElement = (doc: Document = document) => {
+  if (!shadowDOM()) {
+    return doc.activeElement;
+  }
   let activeElement: Element | null = doc.activeElement;
 
   while (activeElement && 'shadowRoot' in activeElement &&
@@ -43,48 +57,11 @@ export const getActiveElement = (doc: Document = document) => {
   return activeElement;
 };
 
-export function getLastChild(node: Node | null | undefined): ChildNode | null {
-  if (!node) {
-    return null;
-  }
-
-  if (!node.lastChild && (node as Element).shadowRoot) {
-    return getLastChild((node as Element).shadowRoot);
-  }
-
-  return node.lastChild;
-}
-
-export function getPreviousSibling(
-  node: Node | null | undefined
-): ChildNode | null {
-  if (!node) {
-    return null;
-  }
-
-  let sibling = node.previousSibling;
-
-  if (!sibling && node.parentElement?.shadowRoot) {
-    sibling = getLastChild(node.parentElement.shadowRoot);
-  }
-
-  return sibling;
-}
-
-export function getLastElementChild(
-  element: Element | null | undefined
-): Element | null {
-  let child = getLastChild(element);
-
-  while (child && child.nodeType !== Node.ELEMENT_NODE) {
-    child = getPreviousSibling(child);
-  }
-
-  return child as Element | null;
-}
-
+/**
+ * ShadowDOM safe version of event.target.
+ */
 export function getEventTarget(event): Element {
-  if (event.target.shadowRoot) {
+  if (shadowDOM() && event.target.shadowRoot) {
     if (event.composedPath) {
       return event.composedPath()[0];
     }

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

@@ -1,6 +1,7 @@
 // https://github.com/microsoft/tabster/blob/a89fc5d7e332d48f68d03b1ca6e344489d1c3898/src/Shadowdomize/ShadowTreeWalker.ts
 
 import {nodeContains} from './DOMFunctions';
+import {shadowDOM} from '@react-stately/flags';
 
 export class ShadowTreeWalker implements TreeWalker {
   public readonly filter: NodeFilter | null;
@@ -302,11 +303,17 @@ export class ShadowTreeWalker implements TreeWalker {
   }
 }
 
+/**
+ * ShadowDOM safe version of document.createTreeWalker.
+ */
 export function createShadowTreeWalker(
     doc: Document,
     root: Node,
     whatToShow?: number,
     filter?: NodeFilter | null
 ) {
-  return new ShadowTreeWalker(doc, root, whatToShow, filter);
+  if (shadowDOM()) {
+    return new ShadowTreeWalker(doc, root, whatToShow, filter);
+  }
+  return doc.createTreeWalker(root, whatToShow, filter);
 }

packages/@react-aria/utils/test/domHelpers.test.js

@@ -12,9 +12,13 @@
 
 
 import {act} from 'react-dom/test-utils';
+import {enableShadowDOM} from '@react-stately/flags';
 import {getActiveElement, getOwnerWindow} from '../';
 
 describe('getOwnerWindow', () => {
+  beforeAll(() => {
+    enableShadowDOM();
+  });
   test.each([null, undefined])('returns the window if the argument is %p', (value) => {
     expect(getOwnerWindow(value)).toBe(window);
   });
@@ -43,6 +47,9 @@ describe('getOwnerWindow', () => {
 });
 
 describe('getActiveElement', () => {
+  beforeAll(() => {
+    enableShadowDOM();
+  });
   it('returns the body as the active element by default', () => {
     act(() => {document.body.focus();}); // Ensure the body is focused, clearing any specific active element
     expect(getActiveElement()).toBe(document.body);

packages/@react-aria/utils/test/shadowTreeWalker.test.tsx

@@ -12,10 +12,14 @@
 
 import {createShadowRoot, render} from '@react-spectrum/test-utils-internal';
 import {createShadowTreeWalker} from '../src';
+import {enableShadowDOM} from '@react-stately/flags';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
 describe('ShadowTreeWalker', () => {
+  beforeAll(() => {
+    enableShadowDOM();
+  });
   describe('Shadow free', () => {
     it('walks through the dom', () => {
       render(

packages/@react-stately/flags/src/index.ts

@@ -11,6 +11,7 @@
  */
 
 let _tableNestedRows = false;
+let _shadowDOM = false;
 
 export function enableTableNestedRows() {
   _tableNestedRows = true;
@@ -19,3 +20,11 @@ export function enableTableNestedRows() {
 export function tableNestedRows() {
   return _tableNestedRows;
 }
+
+export function enableShadowDOM() {
+  _shadowDOM = true;
+}
+
+export function shadowDOM() {
+  return _shadowDOM;
+}

yarn.lock

@@ -6251,6 +6251,7 @@ __metadata:
   dependencies:
     "@react-aria/ssr": "npm:^3.9.7"
     "@react-aria/utils": "npm:^3.27.0"
+    "@react-stately/flags": "npm:^3.0.5"
     "@react-types/shared": "npm:^3.27.0"
     "@swc/helpers": "npm:^0.5.0"
   peerDependencies:
@@ -6807,6 +6808,7 @@ __metadata:
   resolution: "@react-aria/utils@workspace:packages/@react-aria/utils"
   dependencies:
     "@react-aria/ssr": "npm:^3.9.7"
+    "@react-stately/flags": "npm:^3.0.5"
     "@react-stately/utils": "npm:^3.10.5"
     "@react-types/shared": "npm:^3.27.0"
     "@swc/helpers": "npm:^0.5.0"