chore: Use inert in ariaHideOutside (#8372)

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

This reverts commit 26f9102.

* Fix focus ring appearing on S2 submenus

* Fix firefox focusing Picker/Menu items when clicking with mouse

* Fix dialog re-focusing with iOS VO

* Revert "Fix firefox focusing Picker/Menu items when clicking with mouse"

This reverts commit 34bc815.

---------

Co-authored-by: Daniel Lu <dl1644@gmail.com>

Author: devongovett

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

@@ -47,7 +47,8 @@ export function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElemen
       // or announce that it has opened until it has rendered. A workaround
       // is to wait for half a second, then blur and re-focus the dialog.
       let timeout = setTimeout(() => {
-        if (document.activeElement === ref.current) {
+        // Check that the dialog is still focused, or focused was lost to the body.
+        if (document.activeElement === ref.current || document.activeElement === document.body) {
           isRefocusing.current = true;
           if (ref.current) {
             ref.current.blur();

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,7 +24,6 @@ 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 {
@@ -792,7 +791,6 @@ 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/overlays/src/ariaHideOutside.ts

@@ -10,6 +10,15 @@
  * 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>();
@@ -29,10 +38,28 @@ 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[], root: Element = document.body) {
+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;
   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]')) {
@@ -87,12 +114,12 @@ export function ariaHideOutside(targets: Element[], root: Element = document.bod
 
     // 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 (node.getAttribute('aria-hidden') === 'true' && refCount === 0) {
+    if (getHidden(node) && refCount === 0) {
       return;
     }
 
     if (refCount === 0) {
-      node.setAttribute('aria-hidden', 'true');
+      setHidden(node, true);
     }
 
     hiddenNodes.add(node);
@@ -161,7 +188,7 @@ export function ariaHideOutside(targets: Element[], root: Element = document.bod
         continue;
       }
       if (count === 1) {
-        node.removeAttribute('aria-hidden');
+        setHidden(node, false);
         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]);
+      return ariaHideOutside([ref.current], {shouldUseInert: true});
     }
   }, [state.isOpen, ref]);
 

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

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

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

@@ -10,7 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {getOwnerWindow} from '@react-aria/utils';
+import {getOwnerWindow} from './domHelpers';
+
+const supportsCheckVisibility = typeof Element !== 'undefined' && 'checkVisibility' in Element.prototype;
 
 function isStyleVisible(element: Element) {
   const windowObject = getOwnerWindow(element);
@@ -60,6 +62,10 @@ 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/utils/src/isFocusable.ts

@@ -1,3 +1,17 @@
+/*
+ * 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])',
@@ -21,9 +35,22 @@ 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);
+  return element.matches(FOCUSABLE_ELEMENT_SELECTOR) && isElementVisible(element) && !isInert(element);
 }
 
 export function isTabbable(element: Element): boolean {
-  return element.matches(TABBABLE_ELEMENT_SELECTOR);
+  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;
 }

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

@@ -15,7 +15,6 @@ 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';
@@ -977,55 +976,6 @@ 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,7 +103,8 @@ export const MenuTrigger = forwardRef(function MenuTrigger(props: SpectrumMenuTr
         scrollRef={menuRef}
         placement={initialPlacement}
         hideArrow
-        shouldFlip={shouldFlip}>
+        shouldFlip={shouldFlip}
+        shouldContainFocus>
         {menu}
       </Popover>
     );