Un-revert "fix(#4313): ariaHideOutside/aria-modal-polyfill: use inert instead of aria-hidden where supported (#4314) #4881 (#4883)

* Revert "Revert "fix(#4313): ariaHideOutside/aria-modal-polyfill: use inert instead of aria-hidden where supported (#4314)" (#4881)"

This reverts commit 8e6cefd.

* useLayoutEffect -> useEffect in usePopover

Author: reidbarber

packages/@react-aria/aria-modal-polyfill/src/index.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {hideOthers} from 'aria-hidden';
+import {suppressOthers} from 'aria-hidden';
 
 type Revert = () => void;
 
@@ -49,7 +49,7 @@ export function watchModals(selector:string = 'body', {document = currentDocumen
           let modal = addNode.querySelector('[aria-modal="true"], [data-ismodal="true"]') as HTMLElement;
           undo?.();
           let others = [modal, ... liveAnnouncer ? [liveAnnouncer as HTMLElement] : []];
-          undo = hideOthers(others);
+          undo = suppressOthers(others);
         }
       } else if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
         let removedNodes = Array.from(mutation.removedNodes);
@@ -60,7 +60,7 @@ export function watchModals(selector:string = 'body', {document = currentDocumen
           if (modalContainers.length > 0) {
             let modal = modalContainers[modalContainers.length - 1].querySelector('[aria-modal="true"], [data-ismodal="true"]') as HTMLElement;
             let others = [modal, ... liveAnnouncer ? [liveAnnouncer as HTMLElement] : []];
-            undo = hideOthers(others);
+            undo = suppressOthers(others);
           } else {
             undo = undefined;
           }

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

@@ -15,6 +15,8 @@
 let refCountMap = new WeakMap<Element, number>();
 let observerStack = [];
 
+const supportsInert = typeof HTMLElement !== 'undefined' && Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'inert');
+
 /**
  * Hides all elements in the DOM outside the given targets from screen readers using aria-hidden,
  * and returns a function to revert these changes. In addition, changes to the DOM are watched
@@ -81,11 +83,14 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
 
     // 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) {
+    let alreadyHidden = supportsInert && node instanceof HTMLElement ? node.inert : node.getAttribute('aria-hidden') === 'true';
+    if (alreadyHidden && refCount === 0) {
       return;
     }
 
     if (refCount === 0) {
+      supportsInert && node instanceof HTMLElement ?
+      node.inert = true :
       node.setAttribute('aria-hidden', 'true');
     }
 
@@ -150,6 +155,8 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
     for (let node of hiddenNodes) {
       let count = refCountMap.get(node);
       if (count === 1) {
+        supportsInert && node instanceof HTMLElement ?
+        node.inert = false :
         node.removeAttribute('aria-hidden');
         refCountMap.delete(node);
       } else {

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

@@ -13,10 +13,10 @@
 import {ariaHideOutside} from './ariaHideOutside';
 import {AriaPositionProps, useOverlayPosition} from './useOverlayPosition';
 import {DOMAttributes} 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 {RefObject} from 'react';
+import {RefObject, useEffect} from 'react';
 import {useOverlay} from './useOverlay';
 import {usePreventScroll} from './usePreventScroll';
 
@@ -96,7 +96,7 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     isDisabled: isNonModal
   });
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (state.isOpen && !isNonModal && popoverRef.current) {
       return ariaHideOutside([popoverRef.current]);
     }

yarn.lock

@@ -5831,12 +5831,12 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-hidden@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.1.1.tgz#0c356026d3f65e2bd487a3adb73f0c586be2c37e"
-  integrity sha512-M7zYxCcOQPOaxGHoMTKUFD2UNcVFTp9ycrdStLcTPLf8zgTXC3+YcGe+UuzSh5X1BX/0/PtS8xTNy4xyH/6xtw==
+aria-hidden@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
+  integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
   dependencies:
-    tslib "^1.0.0"
+    tslib "^2.0.0"
 
 aria-query@^5.0.0:
   version "5.0.0"
@@ -21894,7 +21894,7 @@ tslib@2.4.0, tslib@^2.0.0, tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-tslib@^1.0.0, tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==