fix: Properly clean up inert if element is hidden via sub dialog combobox

Author: LFDanLu

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

@@ -56,6 +56,11 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt
       element.setAttribute('aria-hidden', 'true');
     } else {
       element.removeAttribute('aria-hidden');
+      if (element instanceof windowObj.HTMLElement) {
+        // We only ever call setHidden with hidden = false when the nodeCount is 1 aka
+        // we are trying to make the element visible to screen readers again, so remove inert as well
+        element.inert = false;
+      }
     }
   };
 

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

@@ -353,6 +353,36 @@ describe('ariaHideOutside', function () {
     expect(() => getByRole('button')).not.toThrow();
   });
 
+  it('should unhide the element even if it was hidden via inert first, then via hideOutside', function () {
+    let {getByRole} = render(
+      <>
+        <input type="radio" />
+        <button>Button</button>
+      </>
+    );
+
+    let button = getByRole('button');
+    let revert1 = ariaHideOutside([button], {shouldUseInert: true});
+
+    expect(getByRole('radio', {hidden: true}).inert).toBeTruthy();
+    expect(() => getByRole('button')).not.toThrow();
+
+    let revert2 = ariaHideOutside([button]);
+
+    expect(getByRole('radio', {hidden: true}).inert).toBeTruthy();
+    expect(() => getByRole('button')).not.toThrow();
+
+    revert1();
+
+    expect(getByRole('radio', {hidden: true}).inert).toBeTruthy();
+    expect(() => getByRole('button')).not.toThrow();
+
+    revert2();
+
+    expect(getByRole('radio', {hidden: true}).inert).toBeFalsy();
+    expect(() => getByRole('button')).not.toThrow();
+  });
+
   it('should hide everything except the provided element [row]', function () {
     let {getAllByRole, getByTestId} = render(
       <div role="grid">

scripts/setupTests.js

@@ -109,3 +109,13 @@ beforeEach(() => {
 afterEach(() => {
   delete window.IntersectionObserver;
 });
+
+Object.defineProperty(HTMLElement.prototype, 'inert', {
+  configurable: true,
+  get() {
+    return this._inert || false;
+  },
+  set(value) {
+    this._inert = value;
+  }
+});