Revert "chore: Use inert in ariaHideOutside (#8317)" (#8371)

Author: devongovett

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

@@ -408,7 +408,7 @@ class DragSession {
       this.dragTarget.element,
       ...validDropItems.flatMap(item => item.activateButtonRef?.current ? [item.element, item.activateButtonRef?.current] : [item.element]),
       ...visibleDropTargets.flatMap(target => target.activateButtonRef?.current ? [target.element, target.activateButtonRef?.current] : [target.element])
-    ], {shouldUseInert: true});
+    ]);
 
     this.mutationObserver.observe(document.body, {subtree: true, attributes: true, attributeFilter: ['aria-hidden']});
   }

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

@@ -24,6 +24,7 @@ import {
 } from '@react-aria/utils';
 import {FocusableElement, RefObject} from '@react-types/shared';
 import {focusSafely, getInteractionModality} from '@react-aria/interactions';
+import {isElementVisible} from './isElementVisible';
 import React, {JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 
 export interface FocusScopeProps {
@@ -757,6 +758,7 @@ export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions
         }
 
         if (filter(node as Element)
+          && isElementVisible(node as Element)
           && (!scope || isElementInScope(node as Element, scope))
           && (!opts?.accept || opts.accept(node as Element))
         ) {

packages/@react-aria/utils/src/isElementVisible.ts renamed to packages/@react-aria/focus/src/isElementVisible.ts

@@ -10,9 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {getOwnerWindow} from './domHelpers';
-
-const supportsCheckVisibility = typeof Element !== 'undefined' && 'checkVisibility' in Element.prototype;
+import {getOwnerWindow} from '@react-aria/utils';
 
 function isStyleVisible(element: Element) {
   const windowObject = getOwnerWindow(element);
@@ -62,10 +60,6 @@ function isAttributeVisible(element: Element, childElement?: Element) {
  * @param element - Element to evaluate for display or visibility.
  */
 export function isElementVisible(element: Element, childElement?: Element): boolean {
-  if (supportsCheckVisibility) {
-    return element.checkVisibility();
-  }
-  
   return (
     element.nodeName !== '#comment' &&
     isStyleVisible(element) &&

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

@@ -10,15 +10,6 @@
  * governing permissions and limitations under the License.
  */
 
-import {getOwnerWindow} from '@react-aria/utils';
-
-const supportsInert = typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
-
-interface AriaHideOutsideOptions {
-  root?: Element,
-  shouldUseInert?: boolean
-}
-
 // Keeps a ref count of all hidden elements. Added to when hiding an element, and
 // subtracted from when showing it again. When it reaches zero, aria-hidden is removed.
 let refCountMap = new WeakMap<Element, number>();
@@ -38,28 +29,10 @@ let observerStack: Array<ObserverWrapper> = [];
  * @param root - Nothing will be hidden above this element.
  * @returns - A function to restore all hidden elements.
  */
-export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOptions | Element) {
-  let windowObj = getOwnerWindow(targets?.[0]);
-  let opts = options instanceof windowObj.Element ? {root: options} : options;
-  let root = opts?.root ?? document.body;
-  let shouldUseInert = opts?.shouldUseInert && supportsInert;
+export function ariaHideOutside(targets: Element[], root = document.body) {
   let visibleNodes = new Set<Element>(targets);
   let hiddenNodes = new Set<Element>();
 
-  let getHidden = (element: Element) => {
-    return shouldUseInert && element instanceof windowObj.HTMLElement ? element.inert : element.getAttribute('aria-hidden') === 'true';
-  };
-
-  let setHidden = (element: Element, hidden: boolean) => {
-    if (shouldUseInert && element instanceof windowObj.HTMLElement) {
-      element.inert = hidden;
-    } else if (hidden) {
-      element.setAttribute('aria-hidden', 'true');
-    } else {
-      element.removeAttribute('aria-hidden');
-    }
-  };
-
   let walk = (root: Element) => {
     // Keep live announcer and top layer elements (e.g. toasts) visible.
     for (let element of root.querySelectorAll('[data-live-announcer], [data-react-aria-top-layer]')) {
@@ -114,12 +87,12 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt
 
     // If already aria-hidden, and the ref count is zero, then this element
     // was already hidden and there's nothing for us to do.
-    if (getHidden(node) && refCount === 0) {
+    if (node.getAttribute('aria-hidden') === 'true' && refCount === 0) {
       return;
     }
 
     if (refCount === 0) {
-      setHidden(node, true);
+      node.setAttribute('aria-hidden', 'true');
     }
 
     hiddenNodes.add(node);
@@ -188,7 +161,7 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt
         continue;
       }
       if (count === 1) {
-        setHidden(node, false);
+        node.removeAttribute('aria-hidden');
         refCountMap.delete(node);
       } else {
         refCountMap.set(node, count - 1);

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

@@ -58,7 +58,7 @@ export function useModalOverlay(props: AriaModalOverlayProps, state: OverlayTrig
 
   useEffect(() => {
     if (state.isOpen && ref.current) {
-      return ariaHideOutside([ref.current], {shouldUseInert: true});
+      return ariaHideOutside([ref.current]);
     }
   }, [state.isOpen, ref]);
 

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

@@ -13,10 +13,9 @@
 import {ariaHideOutside, keepVisible} from './ariaHideOutside';
 import {AriaPositionProps, useOverlayPosition} from './useOverlayPosition';
 import {DOMAttributes, RefObject} from '@react-types/shared';
-import {mergeProps} from '@react-aria/utils';
+import {mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import {PlacementAxis} from '@react-types/overlays';
-import {useEffect} from 'react';
 import {useOverlay} from './useOverlay';
 import {usePreventScroll} from './usePreventScroll';
 
@@ -114,12 +113,12 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     isDisabled: isNonModal || !state.isOpen
   });
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (state.isOpen && popoverRef.current) {
       if (isNonModal) {
         return keepVisible(groupRef?.current ?? popoverRef.current);
       } else {
-        return ariaHideOutside([groupRef?.current ?? popoverRef.current], {shouldUseInert: true});
+        return ariaHideOutside([groupRef?.current ?? popoverRef.current]);
       }
     }
   }, [isNonModal, state.isOpen, popoverRef, groupRef]);

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

@@ -1,17 +1,3 @@
-/*
- * Copyright 2025 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {isElementVisible} from './isElementVisible';
-
 const focusableElements = [
   'input:not([disabled]):not([type=hidden])',
   'select:not([disabled])',
@@ -34,22 +20,9 @@ focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
 const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
 
 export function isFocusable(element: Element): boolean {
-  return element.matches(FOCUSABLE_ELEMENT_SELECTOR) && isElementVisible(element) && !isInert(element);
+  return element.matches(FOCUSABLE_ELEMENT_SELECTOR);
 }
 
 export function isTabbable(element: Element): boolean {
-  return element.matches(TABBABLE_ELEMENT_SELECTOR) && isElementVisible(element) && !isInert(element);
-}
-
-function isInert(element: Element): boolean {
-  let node: Element | null = element;
-  while (node != null) {
-    if (node instanceof node.ownerDocument.defaultView!.HTMLElement && node.inert) {
-      return true;
-    }
-
-    node = node.parentElement;
-  }
-
-  return false;
+  return element.matches(TABBABLE_ELEMENT_SELECTOR);
 }

packages/@react-spectrum/dialog/test/DialogTrigger.test.js

@@ -15,6 +15,7 @@ import {ActionButton, Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {Content} from '@react-spectrum/view';
 import {Dialog, DialogTrigger} from '../';
+import {Heading} from '@react-spectrum/text';
 import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
@@ -976,6 +977,55 @@ describe('DialogTrigger', function () {
     expect(document.activeElement).toBe(innerInput);
   });
 
+  it('will not lose focus to body', async () => {
+    let {getByRole, getByTestId} = render(
+      <Provider theme={theme}>
+        <DialogTrigger type="popover">
+          <ActionButton>Trigger</ActionButton>
+          <Dialog>
+            <Heading>The Heading</Heading>
+            <Content>
+              <MenuTrigger>
+                <ActionButton data-testid="innerButton">Test</ActionButton>
+                <Menu autoFocus="first">
+                  <Item>Item 1</Item>
+                  <Item>Item 2</Item>
+                  <Item>Item 3</Item>
+                </Menu>
+              </MenuTrigger>
+            </Content>
+          </Dialog>
+        </DialogTrigger>
+      </Provider>
+    );
+    let button = getByRole('button');
+    await user.click(button);
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    let outerDialog = getByRole('dialog');
+
+    await waitFor(() => {
+      expect(outerDialog).toBeVisible();
+    }); // wait for animation
+    let innerButton = getByTestId('innerButton');
+    await user.tab();
+    fireEvent.keyDown(document.activeElement, {key: 'Enter'});
+    fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+
+    act(() => {
+      jest.runAllTimers();
+    });
+    await user.tab();
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(document.activeElement).toBe(innerButton);
+  });
+
   describe('portalContainer', () => {
     function InfoDialog(props) {
       let {container} = props;

packages/@react-spectrum/menu/src/MenuTrigger.tsx

@@ -103,8 +103,7 @@ export const MenuTrigger = forwardRef(function MenuTrigger(props: SpectrumMenuTr
         scrollRef={menuRef}
         placement={initialPlacement}
         hideArrow
-        shouldFlip={shouldFlip}
-        shouldContainFocus>
+        shouldFlip={shouldFlip}>
         {menu}
       </Popover>
     );

packages/@react-spectrum/menu/test/MenuTrigger.test.js

@@ -809,7 +809,7 @@ describe('MenuTrigger', function () {
     });
   });
 
-  it('does not close if menu is tabbed away from', async function () {
+  it('closes if menu is tabbed away from', async function () {
     let tree = render(
       <Provider theme={theme}>
         <MenuTrigger>
@@ -835,8 +835,8 @@ describe('MenuTrigger', function () {
     await user.tab();
     act(() => {jest.runAllTimers();});
     act(() => {jest.runAllTimers();});
-    expect(menu).toBeInTheDocument();
-    expect(document.activeElement).toBe(menuTester.options()[0]);
+    expect(menu).not.toBeInTheDocument();
+    expect(document.activeElement).toBe(menuTester.trigger);
   });
 });
 
@@ -930,6 +930,22 @@ AriaMenuTests({
     multipleSelection: () => render(
       <SelectionStatic selectionMode="multiple" />
     ),
+    siblingFocusableElement: () => render(
+      <Provider theme={theme}>
+        <input aria-label="before" />
+        <MenuTrigger>
+          <Button variant="primary">
+            {triggerText}
+          </Button>
+          <Menu>
+            <Item id="1">One</Item>
+            <Item id="2">Two</Item>
+            <Item id="3">Three</Item>
+          </Menu>
+        </MenuTrigger>
+        <input aria-label="after" />
+      </Provider>
+    ),
     multipleMenus: () => render(
       <Provider theme={theme}>
         <MenuTrigger>
@@ -1066,6 +1082,24 @@ AriaMenuTests({
     multipleSelection: () => render(
       <SelectionStatic selectionMode="multiple" />
     ),
+    siblingFocusableElement: () => render(
+      <Provider theme={theme}>
+        <input aria-label="before" />
+        <MenuTrigger>
+          <Button variant="primary">
+            {triggerText}
+          </Button>
+          <Menu items={ariaWithSection}>
+            {item => (
+              <Section key={item.name} items={item.children} title={item.name}>
+                {item => <Item key={item.name} childItems={item.children}>{item.name}</Item>}
+              </Section>
+            )}
+          </Menu>
+        </MenuTrigger>
+        <input aria-label="after" />
+      </Provider>
+    ),
     multipleMenus: () => render(
       <Provider theme={theme}>
         <MenuTrigger>