fix(ComposedModal): fix focus trap and refocus to trigger element whe…

…n closed (#11418) * fix(ComposedModal): fix focus trap and refocus to trigger when closed * fix(ComposedModal): add style and updated snapshot
carbon-design-system · May 17, 2022 · 94be72c · 94be72c
1 parent ecaf9b3
commit 94be72c
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 35 deletions.
diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
@@ -106,6 +106,10 @@
     @include carbon--breakpoint(xlg) {
       width: 48%;
     }
+
+    .#{$prefix}--modal-container-body {
+      display: contents;
+    }
   }
 
   // -----------------------------

diff --git a/packages/react/src/components/ComposedModal/ComposedModal-story.js b/packages/react/src/components/ComposedModal/ComposedModal-story.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { action } from '@storybook/addon-actions';
 import {
@@ -275,6 +275,7 @@ export const PassiveModal = () => {
 };
 
 export const WithStateManager = () => {
+  const closeButton = useRef();
   /**
    * Simple state manager for modals.
    */
@@ -298,10 +299,19 @@ export const WithStateManager = () => {
   return (
     <ModalStateManager
       renderLauncher={({ setOpen }) => (
-        <Button onClick={() => setOpen(true)}>Launch composed modal</Button>
+        <Button ref={closeButton} onClick={() => setOpen(true)}>
+          Launch composed modal
+        </Button>
       )}>
       {({ open, setOpen }) => (
-        <ComposedModal open={open} onClose={() => setOpen(false)}>
+        <ComposedModal
+          open={open}
+          onClose={() => {
+            setOpen(false);
+            setTimeout(() => {
+              closeButton.current.focus();
+            });
+          }}>
           <ModalHeader label="Account resources" title="Add a custom domain" />
           <ModalBody>
             <p style={{ marginBottom: '1rem' }}>

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.js b/packages/react/src/components/ComposedModal/ComposedModal.js
@@ -286,36 +286,38 @@ export default class ComposedModal extends Component {
             }
           }
         }}
+        aria-hidden={!open}
         onBlur={this.handleBlur}
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
         onTransitionEnd={open ? this.handleTransitionEnd : undefined}
         className={modalClass}>
-        {/* Non-translatable: Focus-wrap code makes this `<span>` not actually read by screen readers */}
-        <span
-          ref={this.startSentinel}
-          tabIndex="0"
-          role="link"
-          className={`${prefix}--visually-hidden`}>
-          Focus sentinel
-        </span>
         <div
-          ref={this.innerModal}
           className={containerClass}
           role="dialog"
           aria-modal="true"
           aria-label={ariaLabel ? ariaLabel : generatedAriaLabel}
           aria-labelledby={ariaLabelledBy}>
-          {childrenWithProps}
+          {/* Non-translatable: Focus-wrap code makes this `<span>` not actually read by screen readers */}
+          <button
+            type="button"
+            ref={this.startSentinel}
+            className={`${prefix}--visually-hidden`}>
+            Focus sentinel
+          </button>
+          <div
+            ref={this.innerModal}
+            className={`${prefix}--modal-container-body`}>
+            {childrenWithProps}
+          </div>
+          {/* Non-translatable: Focus-wrap code makes this `<button>` not actually read by screen readers */}
+          <button
+            type="button"
+            ref={this.endSentinel}
+            className={`${prefix}--visually-hidden`}>
+            Focus sentinel
+          </button>
         </div>
-        {/* Non-translatable: Focus-wrap code makes this `<span>` not actually read by screen readers */}
-        <span
-          ref={this.endSentinel}
-          tabIndex="0"
-          role="link"
-          className={`${prefix}--visually-hidden`}>
-          Focus sentinel
-        </span>
       </div>
     );
   }

diff --git a/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap b/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap
@@ -7,6 +7,7 @@ exports[`<ComposedModal /> renders 1`] = `
   selectorPrimaryFocus="[data-modal-primary-focus]"
 >
   <div
+    aria-hidden={false}
     className="bx--modal is-visible"
     onBlur={[Function]}
     onClick={[Function]}
@@ -15,25 +16,27 @@ exports[`<ComposedModal /> renders 1`] = `
     open={true}
     role="presentation"
   >
-    <span
-      className="bx--visually-hidden"
-      role="link"
-      tabIndex="0"
-    >
-      Focus sentinel
-    </span>
     <div
       aria-modal="true"
       className="bx--modal-container"
       role="dialog"
-    />
-    <span
-      className="bx--visually-hidden"
-      role="link"
-      tabIndex="0"
     >
-      Focus sentinel
-    </span>
+      <button
+        className="bx--visually-hidden"
+        type="button"
+      >
+        Focus sentinel
+      </button>
+      <div
+        className="bx--modal-container-body"
+      />
+      <button
+        className="bx--visually-hidden"
+        type="button"
+      >
+        Focus sentinel
+      </button>
+    </div>
   </div>
 </ComposedModal>
 `;
diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
@@ -108,6 +108,10 @@
     @include breakpoint(xlg) {
       width: 48%;
     }
+
+    .#{$prefix}--modal-container-body {
+      display: contents;
+    }
   }
 
   // -----------------------------