fix(#4313): ariaHideOutside/aria-modal-polyfill: use inert instead of aria-hidden where supported (#4773)

Speed up ariaHideOutside on large pages

Author: Michael Jordan

packages/@react-aria/aria-modal-polyfill/package.json

@@ -24,7 +24,7 @@
   "dependencies": {
     "@react-types/shared": "^3.18.1",
     "@swc/helpers": "^0.5.0",
-    "aria-hidden": "^1.1.1"
+    "aria-hidden": "^1.2.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"

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,12 @@
 let refCountMap = new WeakMap<Element, number>();
 let observerStack = [];
 
+const supportsInert = typeof HTMLElement !== 'undefined' && Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'inert');
+
+interface InertElement extends HTMLElement {
+  inert: boolean
+}
+
 /**
  * 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 +87,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 as InertElement).inert : node.getAttribute('aria-hidden') === 'true';
+    if (alreadyHidden && refCount === 0) {
       return;
     }
 
     if (refCount === 0) {
+      supportsInert ?
+      ((node as InertElement).inert = true) :
       node.setAttribute('aria-hidden', 'true');
     }
 
@@ -150,6 +159,8 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
     for (let node of hiddenNodes) {
       let count = refCountMap.get(node);
       if (count === 1) {
+        supportsInert ?
+        ((node as InertElement).inert = false) :
         node.removeAttribute('aria-hidden');
         refCountMap.delete(node);
       } else {

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 @@ [email protected], 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==