fix: Properly clean up inert if element is hidden via sub dialog combobox (#8739)

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

* get rid of tests in favor of story

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-components/stories/Modal.stories.tsx

@@ -10,10 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay} from 'react-aria-components';
+import {Button, ComboBox, Dialog, DialogTrigger, Heading, Input, Label, ListBox, Modal, ModalOverlay, Popover, TextField} from 'react-aria-components';
 import {Meta, StoryFn} from '@storybook/react';
 import React, {useEffect} from 'react';
 import './styles.css';
+import {MyListBoxItem} from './utils';
+import styles from '../example/index.css';
+
 
 export default {
   title: 'React Aria Components/Modal',
@@ -188,3 +191,83 @@ export const ModalInteractionOutsideDefaultOverlayExample: ModalStory = () => {
     </DialogTrigger>
   );
 };
+
+function InertTest() {
+  return (
+    <DialogTrigger>
+      <Button>Open modal</Button>
+      <ModalOverlay
+        isDismissable
+        style={{
+          position: 'fixed',
+          zIndex: 100,
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          background: 'rgba(0, 0, 0, 0.5)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+        <Modal
+          style={{
+            background: 'Canvas',
+            color: 'CanvasText',
+            border: '1px solid gray',
+            padding: 30
+          }}>
+          <Dialog>
+            {() => (
+              <>
+                <TextField>
+                  <Label>First name</Label>
+                  <Input />
+                </TextField>
+                <DialogTrigger>
+                  <Button>Combobox Trigger</Button>
+                  <Popover placement="bottom start">
+                    <Dialog>
+                      {() => (
+                        <ComboBox
+                          menuTrigger="focus"
+                          autoFocus
+                          name="combo-box-example"
+                          data-testid="combo-box-example"
+                          allowsEmptyCollection>
+                          <Label style={{display: 'block'}}>Test</Label>
+                          <div style={{display: 'flex'}}>
+                            <Input />
+                            <Button>
+                              <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
+                            </Button>
+                          </div>
+                          <ListBox
+                            className={styles.menu}>
+                            <MyListBoxItem>Foo</MyListBoxItem>
+                            <MyListBoxItem>Bar</MyListBoxItem>
+                            <MyListBoxItem>Baz</MyListBoxItem>
+                            <MyListBoxItem href="http://google.com">Google</MyListBoxItem>
+                          </ListBox>
+                        </ComboBox>
+                      )}
+                    </Dialog>
+                  </Popover>
+                </DialogTrigger>
+              </>
+            )}
+          </Dialog>
+        </Modal>
+      </ModalOverlay>
+    </DialogTrigger>
+  );
+}
+
+export const InertTestStory = {
+  render: () => <InertTest />,
+  parameters: {
+    description: {
+      data: 'You should be able to click "Combobox Trigger" and then click on the textfield, closing the subdialog. A second click should move focus into the textfield'
+    }
+  }
+};