fix: use attribute presence check for data-react-aria-top-layer in MutationObserver (adobe#9763)

* fix: use attribute presence check for data-react-aria-top-layer in MutationObserver

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add test

* remove unnecessary comment

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Robert Snow <snowystinger@gmail.com>

Author: 3 people

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

@@ -15,6 +15,10 @@ import {shadowDOM} from '@react-stately/flags';
 
 const supportsInert = typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
 
+function isAlwaysVisibleNode(node: HTMLElement | SVGElement): boolean {
+  return node.dataset.liveAnnouncer === 'true' || node.dataset.reactAriaTopLayer !== undefined;
+}
+
 interface AriaHideOutsideOptions {
   root?: Element,
   shouldUseInert?: boolean
@@ -175,7 +179,7 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt
         for (let node of change.addedNodes) {
           if (
             (node instanceof HTMLElement || node instanceof SVGElement) &&
-            (node.dataset.liveAnnouncer === 'true' || node.dataset.reactAriaTopLayer === 'true')
+            isAlwaysVisibleNode(node)
           ) {
             visibleNodes.add(node);
           } else if (node instanceof Element) {
@@ -218,7 +222,7 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt
             for (let node of change.addedNodes) {
               if (
                 (node instanceof HTMLElement || node instanceof SVGElement) &&
-                (node.dataset.liveAnnouncer === 'true' || node.dataset.reactAriaTopLayer === 'true')
+                isAlwaysVisibleNode(node)
               ) {
                 visibleNodes.add(node);
               } else if (node instanceof Element) {

packages/@react-aria/overlays/test/ariaHideOutside.test.js

@@ -239,6 +239,35 @@ describe('ariaHideOutside', function () {
     expect(getAllByRole('checkbox')).toHaveLength(1);
   });
 
+  it('should recognize dynamically added top layer element with data-react-aria-top-layer="" (attribute presence)', async function () {
+    let Test = props => (
+      <>
+        <button>Button</button>
+        {props.show && (
+          <>
+            <div role="status" data-react-aria-top-layer="">Top layer (empty attr)</div>
+            <input type="checkbox" />
+          </>
+        )}
+      </>
+    );
+
+    let {getByRole, getAllByRole, rerender} = render(<Test />);
+
+    let button = getByRole('button');
+    let revert = ariaHideOutside([button]);
+
+    rerender(<Test show />);
+
+    // MutationObserver is async
+    await Promise.resolve();
+    expect(getByRole('status')).not.toHaveAttribute('aria-hidden');
+    expect(getByRole('checkbox', {hidden: true})).toHaveAttribute('aria-hidden', 'true');
+
+    revert();
+    expect(getAllByRole('checkbox')).toHaveLength(1);
+  });
+
   it('should handle when a new element is added inside a target element', async function () {
     let Test = props => (
       <>