fix: all active element access for shadow dom (#9608)

* fix: all active element access for shadow dom

* fix lint

* fix lint

* fix types

* fix lint for real

* fix import

Author: snowystinger

eslint.config.mjs

@@ -250,6 +250,7 @@ export default [{
         "rsp-rules/no-react-key": [ERROR],
         "rsp-rules/sort-imports": [ERROR],
         "rsp-rules/no-non-shadow-contains": [ERROR],
+        "rsp-rules/shadow-safe-active-element": [ERROR],
         "rsp-rules/faster-node-contains": [ERROR],
         "rulesdir/imports": [ERROR],
         "rulesdir/useLayoutEffectRule": [ERROR],
@@ -431,6 +432,7 @@ export default [{
         "rsp-rules/act-events-test": ERROR,
         "rsp-rules/no-getByRole-toThrow": ERROR,
         "rsp-rules/no-non-shadow-contains": OFF,
+        "rsp-rules/shadow-safe-active-element": OFF,
         "rsp-rules/faster-node-contains": OFF,
         "rulesdir/imports": OFF,
         "monorepo/no-internal-import": OFF,
@@ -512,6 +514,7 @@ export default [{
     rules: {
         "rsp-rules/faster-node-contains": OFF,
         "rsp-rules/no-non-shadow-contains": OFF,
+        "rsp-rules/shadow-safe-active-element": OFF,
     },
 }, {
     files: ["packages/@react-spectrum/s2/**", "packages/dev/s2-docs/**"],

packages/@react-aria/calendar/src/useCalendarCell.ts

@@ -13,7 +13,7 @@
 import {CalendarDate, isEqualDay, isSameDay, isToday} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {DOMAttributes, RefObject} from '@react-types/shared';
-import {focusWithoutScrolling, getScrollParent, mergeProps, scrollIntoViewport, useDeepMemo, useDescription} from '@react-aria/utils';
+import {focusWithoutScrolling, getActiveElement, getScrollParent, mergeProps, scrollIntoViewport, useDeepMemo, useDescription} from '@react-aria/utils';
 import {getEraFormat, hookData} from './utils';
 import {getInteractionModality, usePress} from '@react-aria/interactions';
 // @ts-ignore
@@ -300,7 +300,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
       // Also only scroll into view if the cell actually got focused.
       // There are some cases where the cell might be disabled or inside,
       // an inert container and we don't want to scroll then.
-      if (getInteractionModality() !== 'pointer' && document.activeElement === ref.current) {
+      if (getInteractionModality() !== 'pointer' && getActiveElement() === ref.current) {
         scrollIntoViewport(ref.current, {containingElement: getScrollParent(ref.current)});
       }
     }

packages/@react-aria/datepicker/src/useDateSegment.ts

@@ -12,7 +12,7 @@
 
 import {CalendarDate, toCalendar} from '@internationalized/date';
 import {DateFieldState, DateSegment} from '@react-stately/datepicker';
-import {getScrollParent, isIOS, isMac, mergeProps, nodeContains, scrollIntoViewport, useEvent, useId, useLabels, useLayoutEffect} from '@react-aria/utils';
+import {getActiveElement, getScrollParent, isIOS, isMac, mergeProps, nodeContains, scrollIntoViewport, useEvent, useId, useLabels, useLayoutEffect} from '@react-aria/utils';
 import {hookData} from './useDateField';
 import {NumberParser} from '@internationalized/number';
 import React, {CSSProperties, useMemo, useRef} from 'react';
@@ -311,7 +311,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     let element = ref.current;
     return () => {
       // If the focused segment is removed, focus the previous one, or the next one if there was no previous one.
-      if (document.activeElement === element) {
+      if (getActiveElement() === element) {
         let prev = focusManager.focusPrevious();
         if (!prev) {
           focusManager.focusNext();

packages/@react-aria/dialog/src/useDialog.ts

@@ -12,7 +12,7 @@
 
 import {AriaDialogProps} from '@react-types/dialog';
 import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
-import {filterDOMProps, isFocusWithin, useSlotId} from '@react-aria/utils';
+import {filterDOMProps, getActiveElement, isFocusWithin, useSlotId} from '@react-aria/utils';
 import {focusSafely} from '@react-aria/interactions';
 import {useEffect, useRef} from 'react';
 import {useOverlayFocusContain} from '@react-aria/overlays';
@@ -48,7 +48,7 @@ export function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElemen
       // is to wait for half a second, then blur and re-focus the dialog.
       let timeout = setTimeout(() => {
         // Check that the dialog is still focused, or focused was lost to the body.
-        if (document.activeElement === ref.current || document.activeElement === document.body) {
+        if (getActiveElement() === ref.current || getActiveElement() === document.body) {
           isRefocusing.current = true;
           if (ref.current) {
             ref.current.blur();

packages/@react-aria/dnd/src/DragManager.ts

@@ -13,8 +13,8 @@
 import {announce} from '@react-aria/live-announcer';
 import {ariaHideOutside} from '@react-aria/overlays';
 import {DragEndEvent, DragItem, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropItem, DropOperation, DropTarget as DroppableCollectionTarget, FocusableElement} from '@react-types/shared';
+import {getActiveElement, isVirtualClick, isVirtualPointerEvent, nodeContains} from '@react-aria/utils';
 import {getDragModality, getTypes} from './utils';
-import {isVirtualClick, isVirtualPointerEvent, nodeContains} from '@react-aria/utils';
 import type {LocalizedStringFormatter} from '@internationalized/string';
 import {RefObject, useEffect, useState} from 'react';
 
@@ -570,7 +570,7 @@ class DragSession {
       // Re-trigger focus event on active element, since it will not have received it during dragging (see cancelEvent).
       // This corrects state such as whether focus ring should appear.
       // useDroppableCollection handles this itself, so this is only for standalone drop zones.
-      document.activeElement?.dispatchEvent(new FocusEvent('focusin', {bubbles: true}));
+      getActiveElement()?.dispatchEvent(new FocusEvent('focusin', {bubbles: true}));
     }
 
     this.setCurrentDropTarget(null);
@@ -584,7 +584,7 @@ class DragSession {
     }
 
     // Re-trigger focus event on active element, since it will not have received it during dragging (see cancelEvent).
-    document.activeElement?.dispatchEvent(new FocusEvent('focusin', {bubbles: true}));
+    getActiveElement()?.dispatchEvent(new FocusEvent('focusin', {bubbles: true}));
 
     announce(this.stringFormatter.format('dropCanceled'));
   }

packages/@react-aria/grid/src/useGridCell.ts

@@ -12,8 +12,8 @@
 
 import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared';
 import {focusSafely, isFocusVisible} from '@react-aria/interactions';
+import {getActiveElement, getScrollParent, isFocusWithin, mergeProps, nodeContains, scrollIntoViewport} from '@react-aria/utils';
 import {getFocusableTreeWalker} from '@react-aria/focus';
-import {getScrollParent, isFocusWithin, mergeProps, nodeContains, scrollIntoViewport} from '@react-aria/utils';
 import {GridCollection, GridNode} from '@react-types/grid';
 import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
@@ -75,7 +75,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
       let treeWalker = getFocusableTreeWalker(ref.current);
       if (focusMode === 'child') {
         // If focus is already on a focusable child within the cell, early return so we don't shift focus
-        if (isFocusWithin(ref.current) && ref.current !== document.activeElement) {
+        if (isFocusWithin(ref.current) && ref.current !== getActiveElement()) {
           return;
         }
 
@@ -109,12 +109,13 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
   });
 
   let onKeyDownCapture = (e: ReactKeyboardEvent) => {
-    if (!nodeContains(e.currentTarget, e.target as Element) || state.isKeyboardNavigationDisabled || !ref.current || !document.activeElement) {
+    let activeElement = getActiveElement();
+    if (!nodeContains(e.currentTarget, e.target as Element) || state.isKeyboardNavigationDisabled || !ref.current || !activeElement) {
       return;
     }
 
     let walker = getFocusableTreeWalker(ref.current);
-    walker.currentNode = document.activeElement;
+    walker.currentNode = activeElement;
 
     switch (e.key) {
       case 'ArrowLeft': {
@@ -244,7 +245,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
     // If the cell itself is focused, wait a frame so that focus finishes propagatating
     // up to the tree, and move focus to a focusable child if possible.
     requestAnimationFrame(() => {
-      if (focusMode === 'child' && document.activeElement === ref.current) {
+      if (focusMode === 'child' && getActiveElement() === ref.current) {
         focus();
       }
     });

packages/@react-aria/gridlist/src/useGridListItem.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {chain, getScrollParent, isFocusWithin, mergeProps, nodeContains, scrollIntoViewport, useSlotId, useSyntheticLinkProps} from '@react-aria/utils';
+import {chain, getActiveElement, getScrollParent, isFocusWithin, mergeProps, nodeContains, scrollIntoViewport, useSlotId, useSyntheticLinkProps} from '@react-aria/utils';
 import {DOMAttributes, FocusableElement, Key, RefObject, Node as RSNode} from '@react-types/shared';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
 import {getRowId, listMap} from './utils';
@@ -131,14 +131,15 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
   });
 
   let onKeyDownCapture = (e: ReactKeyboardEvent) => {
-    if (!nodeContains(e.currentTarget, e.target as Element) || !ref.current || !document.activeElement) {
+    let activeElement = getActiveElement();
+    if (!nodeContains(e.currentTarget, e.target as Element) || !ref.current || !activeElement) {
       return;
     }
 
     let walker = getFocusableTreeWalker(ref.current);
-    walker.currentNode = document.activeElement;
+    walker.currentNode = activeElement;
 
-    if ('expandedKeys' in state && document.activeElement === ref.current) {
+    if ('expandedKeys' in state && activeElement === ref.current) {
       if ((e.key === EXPANSION_KEYS['expand'][direction]) && state.selectionManager.focusedKey === node.key && hasChildRows && !state.expandedKeys.has(node.key)) {
         state.toggleKey(node.key);
         e.stopPropagation();
@@ -244,7 +245,8 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
   };
 
   let onKeyDown = (e) => {
-    if (!nodeContains(e.currentTarget, e.target as Element) || !ref.current || !document.activeElement) {
+    let activeElement = getActiveElement();
+    if (!nodeContains(e.currentTarget, e.target as Element) || !ref.current || !activeElement) {
       return;
     }
 
@@ -254,7 +256,7 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
           // If there is another focusable element within this item, stop propagation so the tab key
           // is handled by the browser and not by useSelectableCollection (which would take us out of the list).
           let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
-          walker.currentNode = document.activeElement;
+          walker.currentNode = activeElement;
           let next = e.shiftKey ? walker.previousNode() : walker.nextNode();
 
           if (next) {

packages/@react-aria/interactions/src/useFocusVisible.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, getOwnerWindow, isMac, isVirtualClick, openLink} from '@react-aria/utils';
+import {getActiveElement, getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, openLink} from '@react-aria/utils';
 import {ignoreFocusEvent} from './utils';
 import {PointerType} from '@react-types/shared';
 import {useEffect, useState} from 'react';
@@ -310,10 +310,11 @@ function isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: Handl
 
   // For keyboard events that occur on a non-input element that will move focus into input element (aka ArrowLeft going from Datepicker button to the main input group)
   // we need to rely on the user passing isTextInput into here. This way we can skip toggling focus visiblity for said input element
+  let activeElement = getActiveElement(document);
   isTextInput = isTextInput ||
-    (document.activeElement instanceof IHTMLInputElement && !nonTextInputTypes.has(document.activeElement.type)) ||
-    document.activeElement instanceof IHTMLTextAreaElement ||
-    (document.activeElement instanceof IHTMLElement && document.activeElement.isContentEditable);
+    (activeElement instanceof IHTMLInputElement && !nonTextInputTypes.has(activeElement.type)) ||
+    activeElement instanceof IHTMLTextAreaElement ||
+    (activeElement instanceof IHTMLElement && activeElement.isContentEditable);
   return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]);
 }
 

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

@@ -11,7 +11,7 @@
  */
 
 import {FocusableElement} from '@react-types/shared';
-import {focusWithoutScrolling, getOwnerWindow, isFocusable, useLayoutEffect} from '@react-aria/utils';
+import {focusWithoutScrolling, getActiveElement, getOwnerWindow, isFocusable, useLayoutEffect} from '@react-aria/utils';
 import {FocusEvent as ReactFocusEvent, SyntheticEvent, useCallback, useRef} from 'react';
 
 // Turn a native event into a React synthetic event.
@@ -84,7 +84,7 @@ export function useSyntheticBlurEvent<Target extends Element = Element>(onBlur:
       stateRef.current.observer = new MutationObserver(() => {
         if (stateRef.current.isFocused && target.disabled) {
           stateRef.current.observer?.disconnect();
-          let relatedTargetEl = target === document.activeElement ? null : document.activeElement;
+          let relatedTargetEl = target === getActiveElement() ? null : getActiveElement();
           target.dispatchEvent(new FocusEvent('blur', {relatedTarget: relatedTargetEl}));
           target.dispatchEvent(new FocusEvent('focusout', {bubbles: true, relatedTarget: relatedTargetEl}));
         }

packages/@react-aria/menu/src/useSubmenuTrigger.ts

@@ -14,7 +14,7 @@ import {AriaMenuItemProps} from './useMenuItem';
 import {AriaMenuOptions} from './useMenu';
 import type {AriaPopoverProps, OverlayProps} from '@react-aria/overlays';
 import {FocusableElement, FocusStrategy, KeyboardEvent, Node, PressEvent, RefObject} from '@react-types/shared';
-import {focusWithoutScrolling, isFocusWithin, nodeContains, useEvent, useId, useLayoutEffect} from '@react-aria/utils';
+import {focusWithoutScrolling, getActiveElement, isFocusWithin, nodeContains, useEvent, useId, useLayoutEffect} from '@react-aria/utils';
 import type {SubmenuTriggerState} from '@react-stately/menu';
 import {useCallback, useRef} from 'react';
 import {useLocale} from '@react-aria/i18n';
@@ -159,7 +159,7 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
               onSubmenuOpen('first');
             }
 
-            if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {
+            if (type === 'menu' && !!submenuRef?.current && getActiveElement() === ref?.current) {
               focusWithoutScrolling(submenuRef.current);
             }
           } else if (state.isOpen) {
@@ -178,7 +178,7 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
               onSubmenuOpen('first');
             }
 
-            if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {
+            if (type === 'menu' && !!submenuRef?.current && getActiveElement() === ref?.current) {
               focusWithoutScrolling(submenuRef.current);
             }
           } else if (state.isOpen) {