SimpleModal: fixes voiceover context switch for nested modals glitch

helpscout · Jun 20, 2022 · 018c260 · 018c260
1 parent 4751c2e
commit 018c260
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/SimpleModal/SimpleModal.jsx b/src/components/SimpleModal/SimpleModal.jsx
@@ -10,6 +10,7 @@ import {
   SimpleModalUI,
 } from './SimpleModal.css'
 import { shouldUnsetDimensions } from './SimpleModal.utils'
+import isNil from 'lodash.isnil'
 
 function noop() {}
 
@@ -112,10 +113,12 @@ function SimpleModal({
     if (withCloseButton) {
       if (customCloseButton && React.isValidElement(customCloseButton)) {
         const clickHandler = customCloseButton.props.onClick || onClose
+
         return React.cloneElement(customCloseButton, {
           onClick: clickHandler,
         })
       }
+
       return (
         <CloseModalButtonUI
           aria-label="close modal button"
@@ -156,6 +159,7 @@ function SimpleModal({
     >
       <SimpleModalUI
         aria-modal="true"
+        aria-hidden={!isNil(rest.ariaHidden) ? rest.ariaHidden : !show}
         aria-labelledby={ariaLabelledBy}
         className="SimpleModal"
         dataCy={dataCy}

diff --git a/src/components/SimpleModal/SimpleModal.storiesHelpers.js b/src/components/SimpleModal/SimpleModal.storiesHelpers.js
@@ -72,6 +72,7 @@ export const SimpleModalWithTrigger = () => {
           show={state.isOpen1}
           className="first-modal"
           focusModalOnShow
+          ariaHidden={state.isOpen2}
           trapFocus
           onClose={e => {
             dispatch('CLOSE_1')
@@ -100,8 +101,8 @@ export const SimpleModalWithTrigger = () => {
           id="second-modal"
           className="second-modal"
           show={state.isOpen2}
-          height="150px"
-          width="150px"
+          height="200px"
+          width="200px"
           focusModalOnShow
           trapFocus
           onClose={e => {
@@ -111,6 +112,7 @@ export const SimpleModalWithTrigger = () => {
           closeOnClickOutside="modal"
         >
           <div>My second modal</div>
+          <Button kind="primary">Another button</Button>
         </SimpleModal>
       </Portal>
     </>

diff --git a/src/components/SimpleModal/SimpleModal.test.js b/src/components/SimpleModal/SimpleModal.test.js
@@ -19,6 +19,9 @@ describe('Show / no show', () => {
     expect(
       queryByTestId('simple-modal-overlay').querySelector('.SimpleModal')
     ).toBeInTheDocument()
+    expect(
+      queryByTestId('simple-modal-overlay').querySelector('.SimpleModal')
+    ).toHaveAttribute('aria-hidden', 'false')
     expect(document.activeElement).toBe(
       queryByTestId('simple-modal-overlay').querySelector('.SimpleModal')
     )