`ariaHideOutside` keeps dynamically added content hidden when follow-up ariaHideOutside is called inside it

[filipw01]

Provide a general summary of the issue here

I have a case where I need to render some stuff in a portal before adding an actual dialog there.

Before the element was rendered together with calling ariaHideOutside which caused the old MutationObserver to stop observing before the element was added which was working as expected.

I think it's best explained in a test I wrote for ariaHideOutside.test.js

🤔 Expected Behavior?

The element (and its subtree) that ariaHideOutside is called on should be the only element that is not hidden from a11y tree. No matter if other elements have been hidden by ariaHideOutside before

😯 Current Behavior

Now that I added some element that always renders in a portal even if the dialog is not open it's behind aria-hidden and the ariaHideOutside called on the modal is not removing aria-hidden attribute

💁 Possible Solution

Maybe we could call revert on the previous ariaHideOutside call before applying the new ariaHideOutside. I'm open to working on this

🔦 Context

No response

🖥️ Steps to Reproduce

it('should remove aria-hidden from dynamically added content when follow-up ariaHideOutside is called inside that dynamically added content', async function () {
    let Test = props => (
      <>
        <input type="checkbox" />
        {props.show && 
        <div data-testid="test">
          <button>Button</button>
        </div>}
      </>
    );

    let {getByRole, getByTestId, queryByRole, rerender} = render(<Test />);

    let checkbox = getByRole('checkbox');
    let revert = ariaHideOutside([checkbox]);
    
    rerender(<Test show />);
    // Wait for mutation observer tick
    await Promise.resolve();
    
    let section = getByTestId('test');
    let button = getByRole('button', {hidden: true});

    expect(checkbox).not.toHaveAttribute('aria-hidden', 'true');
    expect(section).toHaveAttribute('aria-hidden', 'true');
    
    expect(queryByRole('checkbox')).not.toBeNull();
    expect(queryByRole('button')).toBeNull();

    let revert2 = ariaHideOutside([button]);

    expect(checkbox).toHaveAttribute('aria-hidden');
    expect(section).not.toHaveAttribute('aria-hidden');

    expect(queryByRole('checkbox')).toBeNull();
    expect(queryByRole('button')).not.toBeNull();
    
    revert();
    revert2();

    expect(checkbox).not.toHaveAttribute('aria-hidden');
    expect(section).not.toHaveAttribute('aria-hidden');

    expect(queryByRole('checkbox')).not.toBeNull();
    expect(queryByRole('button')).not.toBeNull();
  });

Version

3.40.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

ChiliPiper

🕷 Tracking Issue

No response

[filipw01]

Just to emphasise this. I'm happy to work on this ASAP, just let me know if the suggested solution is good or that even the expected behaviour aligns with what you expect

[snowystinger]

First, thanks for the very small reproduction. I apologize though, I'm not quite sure I follow the real life use case that goes with it.

For instance, I'd restructure the code to look more like this:

    let Inner = () => {
      let ref = useRef(null);
      useLayoutEffect(() => {
        if (ref.current) {
          let revert = ariaHideOutside([ref.current]);
          return () => revert();
        }
      }, []);
      return (
        <div data-testid="test" style={{display: 'contents'}} ref={ref}>
          <button>Button</button>
        </div>
      );
    };
    let Test = props => (
      <>
        <input type="checkbox" />
        {props.show && <Inner />}
      </>
    );

    let {getByRole, getByTestId, queryByRole, rerender} = render(<Test />);

    let checkbox = getByRole('checkbox');
    let revert = ariaHideOutside([checkbox]);

    rerender(<Test show />);
    // Wait for mutation observer tick
    await Promise.resolve();

    let section = getByTestId('test');

    expect(checkbox).toHaveAttribute('aria-hidden');
    expect(section).not.toHaveAttribute('aria-hidden');

    expect(queryByRole('checkbox')).toBeNull();
    expect(queryByRole('button')).not.toBeNull();

    rerender(<Test />);

    revert();

    expect(checkbox).not.toHaveAttribute('aria-hidden');
    expect(section).not.toHaveAttribute('aria-hidden');

    expect(queryByRole('checkbox')).not.toBeNull();
  });

[filipw01]

That would work for the same component. My issue is with nested modals/popovers.
I have some components written by me. And their usage looks something like this.

<Modal
  trigger={triggerProps => (
    <Button ariaProps={triggerProps}>Open Modal</Button>
  )}
>
  <Modal
    trigger={triggerProps => (
      <Button ariaProps={triggerProps}>Open nested modal</Button>
    )}
  >
    <div>content placeholder</div>
  </Modal>
</Modal>

Modal has a part that looks like this. So even if overlay is not open I'm rendering RootPortal and AnimatePresence

<RootPortal>
  <AnimatePresence>
    {state.isOpen && (
      <ModalOverlay {...someProps}>
        {children}
      </ModalOverlay>
    )}
  </AnimatePresence>
</RootPortal>

Because I want to retain the theme in portal from the parent theme (based on React tree) my RootPortal implementation renders a div with

display: contents;
color-scheme: ${(props) => props.colorScheme};

where colorScheme is derived from React context

So in this example the DOM and ariaHideOutside calls look like this

1. Initial render

<button>Open Modal</button>
<div></div>

2. After opening the modal which calls internally in react-aria calls ariaHideOutside on the button in div

<button aria-hidden>Open Modal</button>
<div><button>Open nested modal</button></div>
<div aria-hidden></div>

3. After opening the nested modal which calls internally in react-aria calls ariaHideOutside on the <p> - here's the issue where the last div stays aria-hidden

<button aria-hidden>Open Modal</button>
<div aria-hidden><button>Open nested modal</button></div>
<div aria-hidden><p>content placeholder</p></div>

[filipw01]

I will edit the initial test that I wrote, because display: contents has nothing to do with it

[filipw01]

Alternatively instead of reverting previous call we could make sure that the element it was most recent called with doesn't have aria-hidden and none of its parents do either

[filipw01]

Here's a patch I applied locally in case someone needs it. Keep in mind you might need to update other artifacts as well as this one just updates the .mjs and the source .ts

diff --git a/dist/ariaHideOutside.mjs b/dist/ariaHideOutside.mjs
index 4e0bc96b1e41a313a246b131f7a957f7253dbde4..710c0459f93f69f5aaeca9b3886459d0e2cf9b9e 100644
--- a/dist/ariaHideOutside.mjs
+++ b/dist/ariaHideOutside.mjs
@@ -1,128 +1,194 @@
-/*
- * Copyright 2020 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.
- */ // Keeps a ref count of all hidden elements. Added to when hiding an element, and
+// https://github.com/adobe/react-spectrum/issues/8268
+
+// 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 $5e3802645cc19319$var$refCountMap = new WeakMap();
-let $5e3802645cc19319$var$observerStack = [];
-function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body) {
-    let visibleNodes = new Set(targets);
-    let hiddenNodes = new Set();
-    let walk = (root)=>{
-        // 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]'))visibleNodes.add(element);
-        let acceptNode = (node)=>{
-            // Skip this node and its children if it is one of the target nodes, or a live announcer.
-            // Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
-            // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
-            // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
-            if (visibleNodes.has(node) || node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row') return NodeFilter.FILTER_REJECT;
-            // Skip this node but continue to children if one of the targets is inside the node.
-            for (let target of visibleNodes){
-                if (node.contains(target)) return NodeFilter.FILTER_SKIP;
-            }
-            return NodeFilter.FILTER_ACCEPT;
-        };
-        let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
-            acceptNode: acceptNode
-        });
-        // TreeWalker does not include the root.
-        let acceptRoot = acceptNode(root);
-        if (acceptRoot === NodeFilter.FILTER_ACCEPT) hide(root);
-        if (acceptRoot !== NodeFilter.FILTER_REJECT) {
-            let node = walker.nextNode();
-            while(node != null){
-                hide(node);
-                node = walker.nextNode();
-            }
+let refCountMap = new WeakMap();
+let observerStack = [];
+
+/**
+ * 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
+ * and new elements outside the targets are automatically hidden.
+ * @param targets - The elements that should remain visible.
+ * @param root - Nothing will be hidden above this element.
+ * @returns - A function to restore all hidden elements.
+ */
+export function ariaHideOutside(targets, root = document.body) {
+  let visibleNodes = new Set(targets);
+  let hiddenNodes = new Set();
+
+  let walk = (root) => {
+    // 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]"
+    )) {
+      visibleNodes.add(element);
+    }
+
+    let acceptNode = (node) => {
+      // Skip this node and its children if it is one of the target nodes, or a live announcer.
+      // Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
+      // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
+      // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
+      if (
+        visibleNodes.has(node) ||
+        (node.parentElement &&
+          hiddenNodes.has(node.parentElement) &&
+          node.parentElement.getAttribute("role") !== "row")
+      ) {
+        return NodeFilter.FILTER_REJECT;
+      }
+
+      // Skip this node but continue to children if one of the targets is inside the node.
+      for (let target of visibleNodes) {
+        if (node.contains(target)) {
+          return NodeFilter.FILTER_SKIP;
         }
+      }
+
+      return NodeFilter.FILTER_ACCEPT;
     };
-    let hide = (node)=>{
-        var _refCountMap_get;
-        let refCount = (_refCountMap_get = $5e3802645cc19319$var$refCountMap.get(node)) !== null && _refCountMap_get !== void 0 ? _refCountMap_get : 0;
-        // 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) return;
-        if (refCount === 0) node.setAttribute('aria-hidden', 'true');
-        hiddenNodes.add(node);
-        $5e3802645cc19319$var$refCountMap.set(node, refCount + 1);
-    };
-    // If there is already a MutationObserver listening from a previous call,
-    // disconnect it so the new on takes over.
-    if ($5e3802645cc19319$var$observerStack.length) $5e3802645cc19319$var$observerStack[$5e3802645cc19319$var$observerStack.length - 1].disconnect();
-    walk(root);
-    let observer = new MutationObserver((changes)=>{
-        for (let change of changes){
-            if (change.type !== 'childList' || change.addedNodes.length === 0) continue;
-            // If the parent element of the added nodes is not within one of the targets,
-            // and not already inside a hidden node, hide all of the new children.
-            if (![
-                ...visibleNodes,
-                ...hiddenNodes
-            ].some((node)=>node.contains(change.target))) {
-                for (let node of change.removedNodes)if (node instanceof Element) {
-                    visibleNodes.delete(node);
-                    hiddenNodes.delete(node);
-                }
-                for (let node of change.addedNodes){
-                    if ((node instanceof HTMLElement || node instanceof SVGElement) && (node.dataset.liveAnnouncer === 'true' || node.dataset.reactAriaTopLayer === 'true')) visibleNodes.add(node);
-                    else if (node instanceof Element) walk(node);
-                }
-            }
-        }
-    });
-    observer.observe(root, {
-        childList: true,
-        subtree: true
+
+    let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+      acceptNode,
     });
-    let observerWrapper = {
-        visibleNodes: visibleNodes,
-        hiddenNodes: hiddenNodes,
-        observe () {
-            observer.observe(root, {
-                childList: true,
-                subtree: true
-            });
-        },
-        disconnect () {
-            observer.disconnect();
+
+    // TreeWalker does not include the root.
+    let acceptRoot = acceptNode(root);
+    if (acceptRoot === NodeFilter.FILTER_ACCEPT) {
+      hide(root);
+    }
+
+    if (acceptRoot !== NodeFilter.FILTER_REJECT) {
+      let node = walker.nextNode();
+      while (node != null) {
+        hide(node);
+        node = walker.nextNode();
+      }
+    }
+  };
+
+  let hide = (node) => {
+    let refCount = refCountMap.get(node) ?? 0;
+
+    // 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) {
+      return;
+    }
+
+    if (refCount === 0) {
+      node.setAttribute("aria-hidden", "true");
+    }
+
+    hiddenNodes.add(node);
+    refCountMap.set(node, refCount + 1);
+  };
+
+  let revertHide = (node) => {
+    let count = refCountMap.get(node);
+    if (count == null) {
+      return;
+    }
+    if (count === 1) {
+      node.removeAttribute("aria-hidden");
+      refCountMap.delete(node);
+    } else {
+      refCountMap.set(node, count - 1);
+    }
+  };
+
+  // If there is already a MutationObserver listening from a previous call,
+  // disconnect it so the new on takes over.
+  if (observerStack.length) {
+    const lastObserver = observerStack[observerStack.length - 1];
+    lastObserver.disconnect();
+    for (let node of lastObserver.hiddenNodes) {
+      revertHide(node);
+    }
+  }
+
+  walk(root);
+
+  let observer = new MutationObserver((changes) => {
+    for (let change of changes) {
+      if (change.type !== "childList" || change.addedNodes.length === 0) {
+        continue;
+      }
+
+      // If the parent element of the added nodes is not within one of the targets,
+      // and not already inside a hidden node, hide all of the new children.
+      if (
+        ![...visibleNodes, ...hiddenNodes].some((node) =>
+          node.contains(change.target)
+        )
+      ) {
+        for (let node of change.removedNodes) {
+          if (node instanceof Element) {
+            visibleNodes.delete(node);
+            hiddenNodes.delete(node);
+          }
         }
-    };
-    $5e3802645cc19319$var$observerStack.push(observerWrapper);
-    return ()=>{
-        observer.disconnect();
-        for (let node of hiddenNodes){
-            let count = $5e3802645cc19319$var$refCountMap.get(node);
-            if (count == null) continue;
-            if (count === 1) {
-                node.removeAttribute('aria-hidden');
-                $5e3802645cc19319$var$refCountMap.delete(node);
-            } else $5e3802645cc19319$var$refCountMap.set(node, count - 1);
+
+        for (let node of change.addedNodes) {
+          if (
+            (node instanceof HTMLElement || node instanceof SVGElement) &&
+            (node.dataset.liveAnnouncer === "true" ||
+              node.dataset.reactAriaTopLayer === "true")
+          ) {
+            visibleNodes.add(node);
+          } else if (node instanceof Element) {
+            walk(node);
+          }
         }
-        // Remove this observer from the stack, and start the previous one.
-        if (observerWrapper === $5e3802645cc19319$var$observerStack[$5e3802645cc19319$var$observerStack.length - 1]) {
-            $5e3802645cc19319$var$observerStack.pop();
-            if ($5e3802645cc19319$var$observerStack.length) $5e3802645cc19319$var$observerStack[$5e3802645cc19319$var$observerStack.length - 1].observe();
-        } else $5e3802645cc19319$var$observerStack.splice($5e3802645cc19319$var$observerStack.indexOf(observerWrapper), 1);
-    };
-}
-function $5e3802645cc19319$export$1020fa7f77e17884(element) {
-    let observer = $5e3802645cc19319$var$observerStack[$5e3802645cc19319$var$observerStack.length - 1];
-    if (observer && !observer.visibleNodes.has(element)) {
-        observer.visibleNodes.add(element);
-        return ()=>{
-            observer.visibleNodes.delete(element);
-        };
+      }
     }
-}
+  });
 
+  observer.observe(root, { childList: true, subtree: true });
 
-export {$5e3802645cc19319$export$1c3ebcada18427bf as ariaHideOutside, $5e3802645cc19319$export$1020fa7f77e17884 as keepVisible};
-//# sourceMappingURL=ariaHideOutside.module.js.map
+  let observerWrapper = {
+    visibleNodes,
+    hiddenNodes,
+    observe() {
+      observer.observe(root, { childList: true, subtree: true });
+    },
+    disconnect() {
+      observer.disconnect();
+    },
+  };
+
+  observerStack.push(observerWrapper);
+
+  return () => {
+    observer.disconnect();
+
+    for (let node of hiddenNodes) {
+      revertHide(node);
+    }
+
+    // Remove this observer from the stack, and start the previous one.
+    if (observerWrapper === observerStack[observerStack.length - 1]) {
+      observerStack.pop();
+      if (observerStack.length) {
+        let lastObserver = observerStack[observerStack.length - 1];
+        lastObserver.observe();
+        for (let node of lastObserver.hiddenNodes) {
+          hide(node);
+        }
+      }
+    } else {
+      observerStack.splice(observerStack.indexOf(observerWrapper), 1);
+    }
+  };
+}
+
+export function keepVisible(element) {
+  let observer = observerStack[observerStack.length - 1];
+  if (observer && !observer.visibleNodes.has(element)) {
+    observer.visibleNodes.add(element);
+    return () => {
+      observer.visibleNodes.delete(element);
+    };
+  }
+}
diff --git a/src/ariaHideOutside.ts b/src/ariaHideOutside.ts
index b7b2a9586de4d36bf8d0ef806193c41ac2b1af4c..b32ef5e7e3324f5804cdc6f395bd67ebecf6b01d 100644
--- a/src/ariaHideOutside.ts
+++ b/src/ariaHideOutside.ts
@@ -1,23 +1,13 @@
-/*
- * Copyright 2020 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.
- */
+// https://github.com/adobe/react-spectrum/issues/8268
 
 // 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>();
 interface ObserverWrapper {
-  visibleNodes: Set<Element>,
-  hiddenNodes: Set<Element>,
-  observe: () => void,
-  disconnect: () => void
+  visibleNodes: Set<Element>;
+  hiddenNodes: Set<Element>;
+  observe: () => void;
+  disconnect: () => void;
 }
 let observerStack: Array<ObserverWrapper> = [];
 
@@ -35,7 +25,9 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
 
   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]')) {
+    for (let element of root.querySelectorAll(
+      "[data-live-announcer], [data-react-aria-top-layer]"
+    )) {
       visibleNodes.add(element);
     }
 
@@ -46,7 +38,9 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
       // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
       if (
         visibleNodes.has(node) ||
-        (node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
+        (node.parentElement &&
+          hiddenNodes.has(node.parentElement) &&
+          node.parentElement.getAttribute("role") !== "row")
       ) {
         return NodeFilter.FILTER_REJECT;
       }
@@ -61,11 +55,9 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
       return NodeFilter.FILTER_ACCEPT;
     };
 
-    let walker = document.createTreeWalker(
-      root,
-      NodeFilter.SHOW_ELEMENT,
-      {acceptNode}
-    );
+    let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+      acceptNode,
+    });
 
     // TreeWalker does not include the root.
     let acceptRoot = acceptNode(root);
@@ -87,35 +79,56 @@ 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) {
+    if (node.getAttribute("aria-hidden") === "true" && refCount === 0) {
       return;
     }
 
     if (refCount === 0) {
-      node.setAttribute('aria-hidden', 'true');
+      node.setAttribute("aria-hidden", "true");
     }
 
     hiddenNodes.add(node);
     refCountMap.set(node, refCount + 1);
   };
 
+  let revertHide = (node: Element) => {
+    let count = refCountMap.get(node);
+    if (count == null) {
+      return;
+    }
+    if (count === 1) {
+      node.removeAttribute("aria-hidden");
+      refCountMap.delete(node);
+    } else {
+      refCountMap.set(node, count - 1);
+    }
+  };
+
   // If there is already a MutationObserver listening from a previous call,
   // disconnect it so the new on takes over.
   if (observerStack.length) {
-    observerStack[observerStack.length - 1].disconnect();
+    const lastObserver = observerStack[observerStack.length - 1];
+    lastObserver.disconnect();
+    for (let node of lastObserver.hiddenNodes) {
+      revertHide(node);
+    }
   }
 
   walk(root);
 
-  let observer = new MutationObserver(changes => {
+  let observer = new MutationObserver((changes) => {
     for (let change of changes) {
-      if (change.type !== 'childList' || change.addedNodes.length === 0) {
+      if (change.type !== "childList" || change.addedNodes.length === 0) {
         continue;
       }
 
       // If the parent element of the added nodes is not within one of the targets,
       // and not already inside a hidden node, hide all of the new children.
-      if (![...visibleNodes, ...hiddenNodes].some(node => node.contains(change.target))) {
+      if (
+        ![...visibleNodes, ...hiddenNodes].some((node) =>
+          node.contains(change.target)
+        )
+      ) {
         for (let node of change.removedNodes) {
           if (node instanceof Element) {
             visibleNodes.delete(node);
@@ -126,7 +139,8 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
         for (let node of change.addedNodes) {
           if (
             (node instanceof HTMLElement || node instanceof SVGElement) &&
-            (node.dataset.liveAnnouncer === 'true' || node.dataset.reactAriaTopLayer === 'true')
+            (node.dataset.liveAnnouncer === "true" ||
+              node.dataset.reactAriaTopLayer === "true")
           ) {
             visibleNodes.add(node);
           } else if (node instanceof Element) {
@@ -137,17 +151,17 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
     }
   });
 
-  observer.observe(root, {childList: true, subtree: true});
+  observer.observe(root, { childList: true, subtree: true });
 
   let observerWrapper: ObserverWrapper = {
     visibleNodes,
     hiddenNodes,
     observe() {
-      observer.observe(root, {childList: true, subtree: true});
+      observer.observe(root, { childList: true, subtree: true });
     },
     disconnect() {
       observer.disconnect();
-    }
+    },
   };
 
   observerStack.push(observerWrapper);
@@ -156,23 +170,18 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
     observer.disconnect();
 
     for (let node of hiddenNodes) {
-      let count = refCountMap.get(node);
-      if (count == null) {
-        continue;
-      }
-      if (count === 1) {
-        node.removeAttribute('aria-hidden');
-        refCountMap.delete(node);
-      } else {
-        refCountMap.set(node, count - 1);
-      }
+      revertHide(node);
     }
 
     // Remove this observer from the stack, and start the previous one.
     if (observerWrapper === observerStack[observerStack.length - 1]) {
       observerStack.pop();
       if (observerStack.length) {
-        observerStack[observerStack.length - 1].observe();
+        let lastObserver = observerStack[observerStack.length - 1];
+        lastObserver.observe();
+        for (let node of lastObserver.hiddenNodes) {
+          hide(node);
+        }
       }
     } else {
       observerStack.splice(observerStack.indexOf(observerWrapper), 1);

[snowystinger]

related #8317