feat: [#186702387] close button revisions

newjersey · Oct 2, 2024 · db2be2d · db2be2d
1 parent 6b348f5
commit db2be2d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/web/src/components/ModalOneButton.tsx b/web/src/components/ModalOneButton.tsx
@@ -36,7 +36,6 @@ export const ModalOneButton = (props: Props): ReactElement => {
       close={props.close}
       title={props.title}
       unpaddedChildren={buttonNode}
-      uncloseable={props.uncloseable}
     >
       {props.children}
     </ModalZeroButton>

diff --git a/web/src/components/ModalZeroButton.tsx b/web/src/components/ModalZeroButton.tsx
@@ -2,19 +2,33 @@ import { Heading } from "@/components/njwds-extended/Heading";
 import { Icon } from "@/components/njwds/Icon";
 import { ContextualInfoContext } from "@/contexts/contextualInfoContext";
 import { Dialog, DialogContent, DialogTitle, IconButton } from "@mui/material";
-import { ReactElement, ReactNode, useContext } from "react";
+import { ReactElement, ReactNode, useContext, useEffect, useRef } from "react";
 
 interface Props {
   isOpen: boolean;
   close: () => void;
   title: string;
   children: ReactNode;
   unpaddedChildren?: ReactNode;
-  uncloseable?: boolean;
 }
 
 export const ModalZeroButton = (props: Props): ReactElement => {
   const { contextualInfo } = useContext(ContextualInfoContext);
+
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (dialogRef.current) {
+      const firstFocusableElement = dialogRef.current.querySelector<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (firstFocusableElement) {
+        firstFocusableElement.focus();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dialogRef.current]);
+
   return (
     <Dialog
       fullWidth={false}
@@ -23,6 +37,7 @@ export const ModalZeroButton = (props: Props): ReactElement => {
       onClose={props.close}
       aria-labelledby="dialog-modal"
       disableEnforceFocus={contextualInfo.isVisible}
+      ref={dialogRef}
     >
       <div className="display-flex margin-top-1">
         <DialogTitle
@@ -33,18 +48,16 @@ export const ModalZeroButton = (props: Props): ReactElement => {
             {props.title}
           </Heading>
         </DialogTitle>
-        {!props.uncloseable && (
-          <IconButton
-            aria-label="close"
-            className="margin-left-auto margin-3"
-            onClick={props.close}
-            sx={{
-              color: "#757575",
-            }}
-          >
-            <Icon className="usa-icon--size-4">close</Icon>
-          </IconButton>
-        )}
+        <IconButton
+          aria-label="close"
+          className="margin-left-auto margin-3"
+          onClick={props.close}
+          sx={{
+            color: "#757575",
+          }}
+        >
+          <Icon className="usa-icon--size-4">close</Icon>
+        </IconButton>
       </div>
       <DialogContent sx={{ padding: 0 }} dividers>
         <div className="padding-x-4 margin-bottom-4 margin-top-2" data-testid="modal-body">