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

guidari · tay1orjones · web-flow · commit ef1336aba5e3 · 2023-07-13T13:28:32.000Z
* 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 &lt;taylor.jones826@gmail.com&gt;
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}
