Merge pull request #484 from cornell-dti/cww72/close-modal

Modal closes when clicking outside
cornell-dti · Sep 25, 2024 · 929c82c · 929c82c
2 parents 2b5a978 + ea2562f
commit 929c82c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/frontend/src/components/EmployeeCards/EmployeeCards.tsx b/frontend/src/components/EmployeeCards/EmployeeCards.tsx
@@ -66,6 +66,14 @@ const EmployeeCard = ({
   const netId = email.split('@')[0];
   const fmtPhone = formatPhone(phoneNumber);
 
+  /**
+   * Formats availability, represented by an object that maps available days to
+   * start and end times, into a printable string with availabilities formatted as '[day]: [start] - [end]'.
+   * Ignores malformed availabilities, e.g. missing start or end times, from being printed.
+   *
+   * @param availability the driver's availability, represented as an object map of days to start and end times
+   * @returns a string representation of a driver's availibility
+   */
   const formatAvail = (availability: {
     [key: string]: { startTime: string; endTime: string };
   }) => {

diff --git a/frontend/src/components/Modal/Modal.tsx b/frontend/src/components/Modal/Modal.tsx
@@ -66,19 +66,15 @@ const Modal = ({
     <>
       {isOpen &&
         createPortal(
-          <FocusTrap
-            focusTrapOptions={{
-              onDeactivate: onClose,
-              returnFocusOnDeactivate: true,
-            }}
-          >
-            <div className={styles.background}>
-              <div
-                className={styles.modal}
-                role="dialog"
-                aria-modal="true"
-                aria-labelledby={arialabelledby ?? id}
-              >
+          <div className={styles.background}>
+            <FocusTrap
+              focusTrapOptions={{
+                onDeactivate: onClose,
+                returnFocusOnDeactivate: true,
+                clickOutsideDeactivates: true,
+              }}
+            >
+              <div className={styles.modal}>
                 <div className={styles.topContainer}>
                   {isRider ? (
                     <h1 className={styles.title} id={id}>
@@ -101,8 +97,8 @@ const Modal = ({
                 </div>
                 <div className={styles.page}>{pages[currentPage]}</div>
               </div>
-            </div>
-          </FocusTrap>,
+            </FocusTrap>
+          </div>,
           document.body
         )}
     </>