fix: fixed VO and JAWS problem in FF and Safari (#14156)

* fix: fixed VO and JAWS problem in FF and Safari * fix: removed aria hidden * fix: removed tabIndex from focus sentinel * fix: remove wrong tabIndex * fix(composedmodal): improve initial focus to match modal behavior * Update Modal.js Remove the tabIndex from Modal * fix: added button inside the dialog --------- Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
carbon-design-system · Jul 13, 2023 · ef1336a · ef1336a
1 parent f20a3a4
commit ef1336a
Showing 1 changed file with 19 additions and 16 deletions.
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -305,28 +305,30 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
     });
 
     useEffect(() => {
-      const focusButton = (focusContainerElement) => {
-        if (focusContainerElement) {
-          const primaryFocusElement =
-            focusContainerElement.querySelector(selectorPrimaryFocus);
-          if (primaryFocusElement) {
-            primaryFocusElement.focus();
-            return;
-          }
-          if (button.current) {
-            button.current.focus();
-          }
+      const initialFocus = (focusContainerElement) => {
+        const containerElement = focusContainerElement || innerModal.current;
+        const primaryFocusElement = containerElement
+          ? containerElement.querySelector(selectorPrimaryFocus)
+          : null;
+
+        if (primaryFocusElement) {
+          return primaryFocusElement;
         }
+
+        return button && button.current;
       };
 
-      if (!open) {
-        return;
-      }
+      const focusButton = (focusContainerElement) => {
+        const target = initialFocus(focusContainerElement);
+        if (target) {
+          target.focus();
+        }
+      };
 
-      if (innerModal.current) {
+      if (open && isOpen) {
         focusButton(innerModal.current);
       }
-    }, [open, selectorPrimaryFocus]);
+    }, [open, selectorPrimaryFocus, isOpen]);
 
     return (
       <div
@@ -345,6 +347,7 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
           aria-label={ariaLabel ? ariaLabel : generatedAriaLabel}
           aria-labelledby={ariaLabelledBy}>
           {/* Non-translatable: Focus-wrap code makes this `<button>` not actually read by screen readers */}
+
           <button
             type="button"
             ref={startSentinel}