fix(ComposedModal): wrap modal content in div to get VO in iOS working (

#11350) * fix(composed-modal): console logs for focus wrapping * fix(ComposedModal): wrap modal content in div to get VO in iOS working * fix(ComposedModal): undo focuswrap object param changes * chore(snapshot): update snapshot * fix(ComposedModal): remove unnecessary tabIndex for buttons Co-authored-by: Josh Black <[email protected]>
carbon-design-system · May 16, 2022 · 9685228 · 9685228
1 parent 6560cc7
commit 9685228
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 32 deletions.
diff --git a/packages/react/src/components/ComposedModal/next/ComposedModal.js b/packages/react/src/components/ComposedModal/next/ComposedModal.js
@@ -241,31 +241,30 @@ const ComposedModal = React.forwardRef(function ComposedModal(
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       className={modalClass}>
-      {/* Non-translatable: Focus-wrap code makes this `<span>` not actually read by screen readers */}
-      <span
-        ref={startSentinel}
-        tabIndex="0"
-        role="link"
-        className={`${prefix}--visually-hidden`}>
-        Focus sentinel
-      </span>
       <div
-        ref={innerModal}
         className={containerClass}
         role="dialog"
         aria-modal="true"
         aria-label={ariaLabel ? ariaLabel : generatedAriaLabel}
         aria-labelledby={ariaLabelledBy}>
-        {childrenWithProps}
+        {/* Non-translatable: Focus-wrap code makes this `<button>` not actually read by screen readers */}
+        <button
+          type="button"
+          ref={startSentinel}
+          className={`${prefix}--visually-hidden`}>
+          Focus sentinel
+        </button>
+        <div ref={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={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={endSentinel}
-        tabIndex="0"
-        role="link"
-        className={`${prefix}--visually-hidden`}>
-        Focus sentinel
-      </span>
     </div>
   );
 });

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
@@ -14,25 +14,27 @@ exports[`<ComposedModal /> renders 1`] = `
     onKeyDown={[Function]}
     role="presentation"
   >
-    <span
-      className="cds--visually-hidden"
-      role="link"
-      tabIndex="0"
-    >
-      Focus sentinel
-    </span>
     <div
       aria-modal="true"
       className="cds--modal-container"
       role="dialog"
-    />
-    <span
-      className="cds--visually-hidden"
-      role="link"
-      tabIndex="0"
     >
-      Focus sentinel
-    </span>
+      <button
+        className="cds--visually-hidden"
+        type="button"
+      >
+        Focus sentinel
+      </button>
+      <div
+        className="cds--modal-container-body"
+      />
+      <button
+        className="cds--visually-hidden"
+        type="button"
+      >
+        Focus sentinel
+      </button>
+    </div>
   </div>
 </ForwardRef(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;
+    }
   }
 
   // -----------------------------