fix(ComposedModal): close modal with esc key when no element has focus (

#11609) * fix(ComposedModal): close modal with esc key when no element has focus * test(ComposedModal): update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Josh Black <[email protected]>
carbon-design-system · Jun 17, 2022 · f72a96a · f72a96a
1 parent 76faa44
commit f72a96a
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 2 deletions.
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.js b/packages/react/src/components/ComposedModal/ComposedModal.js
@@ -290,7 +290,8 @@ export default class ComposedModal extends Component {
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
         onTransitionEnd={open ? this.handleTransitionEnd : undefined}
-        className={modalClass}>
+        className={modalClass}
+        tabIndex="-1">
         {/* Non-translatable: Focus-wrap code makes this `<span>` not actually read by screen readers */}
         <span
           ref={this.startSentinel}

diff --git a/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap b/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap
@@ -14,6 +14,7 @@ exports[`<ComposedModal /> renders 1`] = `
     onTransitionEnd={[Function]}
     open={true}
     role="presentation"
+    tabIndex="-1"
   >
     <span
       className="cds--visually-hidden"

diff --git a/packages/react/src/components/ComposedModal/next/ComposedModal.js b/packages/react/src/components/ComposedModal/next/ComposedModal.js
@@ -239,7 +239,8 @@ const ComposedModal = React.forwardRef(function ComposedModal(
       onBlur={handleBlur}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      className={modalClass}>
+      className={modalClass}
+      tabIndex="-1">
       <div
         className={containerClass}
         role="dialog"

diff --git a/packages/react/src/components/ComposedModal/next/__snapshots__/ComposedModal-test.js.snap b/packages/react/src/components/ComposedModal/next/__snapshots__/ComposedModal-test.js.snap
@@ -13,6 +13,7 @@ exports[`<ComposedModal /> renders 1`] = `
     onClick={[Function]}
     onKeyDown={[Function]}
     role="presentation"
+    tabIndex="-1"
   >
     <div
       aria-modal="true"