fix: fixed VO and JAWS problem in FF and Safari

carbon-design-system · Jul 7, 2023 · 9734893 · 9734893
1 parent 63cf8ee
commit 9734893
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.stories.js b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
@@ -43,7 +43,7 @@ export const Default = () => {
     <ComposedModal open>
       <ModalHeader label="Account resources" title="Add a custom domain" />
       <ModalBody>
-        <p style={{ marginBottom: '1rem' }}>
+        <p style={{ marginBottom: '1rem' }} aria-hidden="true">
           Custom domains direct requests for your apps in this Cloud Foundry
           organization to a URL that you own. A custom domain can be a shared
           domain, a shared subdomain, or a shared domain and host.

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -348,7 +348,8 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
           <button
             type="button"
             ref={startSentinel}
-            className={`${prefix}--visually-hidden`}>
+            className={`${prefix}--visually-hidden`}
+            tabIndex={-1}>
             Focus sentinel
           </button>
           <div ref={innerModal} className={`${prefix}--modal-container-body`}>
@@ -358,7 +359,8 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
           <button
             type="button"
             ref={endSentinel}
-            className={`${prefix}--visually-hidden`}>
+            className={`${prefix}--visually-hidden`}
+            tabIndex={-1}>
             Focus sentinel
           </button>
         </div>

diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
@@ -243,7 +243,8 @@ const Modal = React.forwardRef(function Modal(
       <div
         id={modalBodyId}
         className={contentClasses}
-        {...hasScrollingContentProps}>
+        {...hasScrollingContentProps}
+        tabIndex={-1}>
         {children}
       </div>
       {hasScrollingContent && (