fix(Modal): updated logic to set aria-hidden for tearsheets

Author: thatblindgeye

packages/react-core/src/components/Modal/Modal.tsx

@@ -69,6 +69,7 @@ interface ModalState {
 class Modal extends Component<ModalProps, ModalState> {
   static displayName = 'Modal';
   static currentId = 0;
+  static openModalStack: string[] = [];
   boxId = '';
   backdropId = '';
 
@@ -109,12 +110,24 @@ class Modal extends Component<ModalProps, ModalState> {
   toggleSiblingsFromScreenReaders = (hide: boolean) => {
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
-    const bodyChildren = target.children;
-    for (const child of Array.from(bodyChildren)) {
-      const isPopperElement = child.hasAttribute('data-popper-placement');
-      if (child.id !== this.backdropId && !isPopperElement) {
-        hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
+    const idx = Modal.openModalStack.indexOf(this.backdropId);
+
+    if (hide && idx === -1) {
+      Modal.openModalStack.push(this.backdropId);
+    } else if (!hide && idx !== -1) {
+      Modal.openModalStack.splice(idx, 1);
+    }
+
+    const activeBackdropId =
+      Modal.openModalStack.length > 0 ? Modal.openModalStack[Modal.openModalStack.length - 1] : null;
+
+    for (const child of Array.from(target.children)) {
+      // We need to prevent aria-hidden being applied to popper elements appended to document.body
+      if (child.hasAttribute('data-popper-placement')) {
+        continue;
       }
+      const shouldHide = activeBackdropId && child.id !== activeBackdropId;
+      shouldHide ? child.setAttribute('aria-hidden', 'true') : child.removeAttribute('aria-hidden');
     }
   };
 
@@ -140,8 +153,10 @@ class Modal extends Component<ModalProps, ModalState> {
       this.toggleSiblingsFromScreenReaders(true);
     } else {
       if (prevProps.isOpen !== this.props.isOpen) {
-        target.classList.remove(css(styles.backdropOpen));
         this.toggleSiblingsFromScreenReaders(false);
+        if (Modal.openModalStack.length === 0) {
+          target.classList.remove(css(styles.backdropOpen));
+        }
       }
     }
   }
@@ -150,8 +165,10 @@ class Modal extends Component<ModalProps, ModalState> {
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
     target.removeEventListener('keydown', this.handleEscKeyClick, false);
-    target.classList.remove(css(styles.backdropOpen));
     this.toggleSiblingsFromScreenReaders(false);
+    if (Modal.openModalStack.length === 0) {
+      target.classList.remove(css(styles.backdropOpen));
+    }
   }
 
   render() {

packages/react-core/src/components/Modal/__tests__/Modal.test.tsx

@@ -64,7 +64,28 @@ const ModalWithAdjacentModal = () => {
   );
 };
 
+const MultipleOpenModals = () => {
+  const [isFirstOpen, setIsFirstOpen] = useState(true);
+  const [isSecondOpen, setIsSecondOpen] = useState(false);
+
+  return (
+    <>
+      <aside>Aside sibling</aside>
+      <Modal isOpen={isFirstOpen} appendTo={target} onClose={() => setIsFirstOpen(false)} aria-label="First modal">
+        <button onClick={() => setIsSecondOpen(true)}>Open second modal</button>
+      </Modal>
+      <Modal isOpen={isSecondOpen} appendTo={target} onClose={() => setIsSecondOpen(false)} aria-label="Second modal">
+        Second modal content
+      </Modal>
+    </>
+  );
+};
+
 describe('Modal', () => {
+  beforeEach(() => {
+    Modal.openModalStack = [];
+  });
+
   test('Modal creates a container element once for div', () => {
     render(<Modal {...props} />);
     expect(document.createElement).toHaveBeenCalledWith('div');
@@ -181,4 +202,67 @@ describe('Modal', () => {
       'pf-v6-l-bullseye'
     );
   });
+
+  test('backdropOpen class remains when closing one of multiple open modals', async () => {
+    const user = userEvent.setup();
+
+    render(<MultipleOpenModals />, { container: document.body.appendChild(target) });
+
+    await user.click(screen.getByRole('button', { name: 'Open second modal' }));
+
+    expect(target).toHaveClass(css(styles.backdropOpen));
+
+    const closeButtons = screen.getAllByRole('button', { name: 'Close', hidden: true });
+    await user.click(closeButtons[closeButtons.length - 1]);
+
+    expect(target).toHaveClass(css(styles.backdropOpen));
+  });
+
+  test('backdropOpen class is removed when all modals are closed', async () => {
+    const user = userEvent.setup();
+
+    render(<MultipleOpenModals />, { container: document.body.appendChild(target) });
+
+    await user.click(screen.getByRole('button', { name: 'Open second modal' }));
+
+    const closeButtons = screen.getAllByRole('button', { name: 'Close', hidden: true });
+    await user.click(closeButtons[closeButtons.length - 1]);
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+
+    expect(target).not.toHaveClass(css(styles.backdropOpen));
+  });
+
+  test('only the most recent modal does not have aria-hidden when multiple modals are open', async () => {
+    const user = userEvent.setup();
+
+    render(<MultipleOpenModals />, { container: document.body.appendChild(target) });
+
+    const firstBackdrop = screen.getByLabelText('First modal').closest('[class*="backdrop"]');
+
+    await user.click(screen.getByRole('button', { name: 'Open second modal' }));
+
+    const secondBackdrop = screen.getByLabelText('Second modal').closest('[class*="backdrop"]');
+
+    expect(firstBackdrop).toHaveAttribute('aria-hidden', 'true');
+    expect(secondBackdrop).not.toHaveAttribute('aria-hidden');
+  });
+
+  test('closing the active modal reveals the previous modal', async () => {
+    const user = userEvent.setup();
+
+    render(<MultipleOpenModals />, { container: document.body.appendChild(target) });
+
+    await user.click(screen.getByRole('button', { name: 'Open second modal' }));
+
+    const firstBackdrop = screen
+      .getByLabelText('First modal', { selector: '[role="dialog"]' })
+      .closest('[class*="backdrop"]');
+
+    expect(firstBackdrop).toHaveAttribute('aria-hidden', 'true');
+
+    const closeButtons = screen.getAllByRole('button', { name: 'Close', hidden: true });
+    await user.click(closeButtons[closeButtons.length - 1]);
+
+    expect(firstBackdrop).not.toHaveAttribute('aria-hidden');
+  });
 });

packages/react-core/src/components/Modal/examples/ModalBasic.tsx

@@ -3,10 +3,14 @@ import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/
 
 export const ModalBasic: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isModal2Open, setIsModal2Open] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
+  const handleModal2Toggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModal2Open(!isModal2Open);
+  };
 
   return (
     <Fragment>
@@ -27,6 +31,9 @@ export const ModalBasic: React.FunctionComponent = () => {
           consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
           est laborum.
+          <Button variant="primary" onClick={handleModal2Toggle} ouiaId="ShowBasicModal">
+            Show basic modal
+          </Button>
         </ModalBody>
         <ModalFooter>
           <Button key="confirm" variant="primary" onClick={handleModalToggle}>
@@ -37,6 +44,24 @@ export const ModalBasic: React.FunctionComponent = () => {
           </Button>
         </ModalFooter>
       </Modal>
+      <Modal
+        isOpen={isModal2Open}
+        onClose={handleModal2Toggle}
+        ouiaId="BasicModal2"
+        aria-labelledby="basic2-modal-title"
+        aria-describedby="modal2-box-body-basic"
+      >
+        <ModalHeader title="Nested modal" labelId="basic2-modal-title" />
+        <ModalBody id="modal2-box-body-basic">Nested modal</ModalBody>
+        <ModalFooter>
+          <Button key="confirm2" variant="primary" onClick={handleModal2Toggle}>
+            Confirm
+          </Button>
+          <Button key="cancel2" variant="link" onClick={handleModal2Toggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
     </Fragment>
   );
 };