add ARIA to confirmation, rider, and ride modals

cornell-dti · Nov 7, 2023 · 3759019 · 3759019
1 parent 741150f
commit 3759019
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/frontend/src/components/Modal/ConfirmationModal.tsx b/frontend/src/components/Modal/ConfirmationModal.tsx
@@ -65,9 +65,15 @@ const ConfirmationModal = ({
   };
 
   return (
-    <Modal title={''} isOpen={open} onClose={closeModal} displayClose={true} id="confirm-modal">
+    <Modal
+      title={''}
+      isOpen={open}
+      onClose={closeModal}
+      displayClose={true}
+      arialabelledby="confirm-text"
+    >
       <div className={styles.modal}>
-        <p className={styles.modalText}>
+        <p className={styles.modalText} id="confirm-text">
           Are you sure you want to remove {user.firstName} {user.lastName}?
         </p>
         <div className={styles.buttonContainer}>

diff --git a/frontend/src/components/Modal/Modal.tsx b/frontend/src/components/Modal/Modal.tsx
@@ -36,6 +36,7 @@ type ModalProps = {
   displayClose?: boolean;
   isRider?: boolean;
   id?: string;
+  arialabelledby?: string;
 };
 
 const Modal = ({
@@ -47,7 +48,8 @@ const Modal = ({
   onClose,
   displayClose,
   isRider = true,
-  id,
+  arialabelledby,
+  id = 'modal',
 }: ModalProps) => {
   // Wrapping children in Array to match type for numPages
   const pages = paginate ? (children as React.ReactNodeArray) : [children];
@@ -75,7 +77,7 @@ const Modal = ({
                 className={styles.modal}
                 role="dialog"
                 aria-modal="true"
-                aria-labelledby={id}
+                aria-labelledby={arialabelledby ?? id}
               >
                 <div className={styles.topContainer}>
                   {isRider ? (

diff --git a/frontend/src/components/Modal/RiderModalInfo.tsx b/frontend/src/components/Modal/RiderModalInfo.tsx
@@ -135,6 +135,7 @@ const RiderModalInfo = ({
             Needs:{' '}
           </Label>
           <select
+            id="needs"
             name="needs"
             aria-required="true"
             ref={register({ required: true })}

diff --git a/frontend/src/components/RideModal/RideModal.tsx b/frontend/src/components/RideModal/RideModal.tsx
@@ -227,6 +227,7 @@ const RideModal = ({ open, close, ride, editSingle }: RideModalProps) => {
         isOpen={isOpen}
         currentPage={currentPage}
         onClose={closeModal}
+        id="ride-modal"
       >
         <RideTimesPage
           formData={formData}