add ARIA to driver modal

cornell-dti · Nov 15, 2023 · b079900 · b079900
1 parent 3759019
commit b079900
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/frontend/src/components/RideModal/Pages/Driver.tsx b/frontend/src/components/RideModal/Pages/Driver.tsx
@@ -5,7 +5,12 @@ import styles from '../ridemodal.module.css';
 import { Label, Input, Button } from '../../FormElements/FormElements';
 import axios from '../../../util/axios';
 
-const DriverPage = ({ onBack, onSubmit, formData }: ModalPageProps) => {
+const DriverPage = ({
+  onBack,
+  onSubmit,
+  formData,
+  labelid,
+}: ModalPageProps & { labelid?: string }) => {
   const { register, handleSubmit, formState } = useForm({
     defaultValues: {
       driver: formData?.driver ?? '',
@@ -38,9 +43,14 @@ const DriverPage = ({ onBack, onSubmit, formData }: ModalPageProps) => {
   return (
     <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
       <div className={styles.inputContainer}>
-        <div className={styles.drivers}>
+        <div
+          className={styles.drivers}
+          aria-required="true"
+          role="radiogroup"
+          aria-labelledby={labelid}
+        >
           {loaded ? (
-            availableDrivers.map((d) => (
+            availableDrivers.map((d, index) => (
               <div className={styles.driver} key={d.id}>
                 <Label
                   htmlFor={d.firstName + d.lastName}
@@ -55,7 +65,6 @@ const DriverPage = ({ onBack, onSubmit, formData }: ModalPageProps) => {
                   type="radio"
                   value={d.id}
                   ref={register({ required: true })}
-                  aria-required="true"
                 />
               </div>
             ))

diff --git a/frontend/src/components/RideModal/Pages/RiderInfo.tsx b/frontend/src/components/RideModal/Pages/RiderInfo.tsx
@@ -88,7 +88,7 @@ const RiderInfoPage = ({ formData, onBack, onSubmit }: ModalPageProps) => {
           )}
           <datalist id="locations">
             {locations.map((l) => (
-              <option key={l.name}>{l.name}</option>
+              <option key={l.id}>{l.name}</option>
             ))}
           </datalist>
         </div>
@@ -118,7 +118,7 @@ const RiderInfoPage = ({ formData, onBack, onSubmit }: ModalPageProps) => {
           )}
           <datalist id="locations">
             {locations.map((l) => (
-              <option key={l.name}>{l.name}</option>
+              <option key={l.id}>{l.name}</option>
             ))}
           </datalist>
         </div>

diff --git a/frontend/src/components/RideModal/RideModal.tsx b/frontend/src/components/RideModal/RideModal.tsx
@@ -237,6 +237,7 @@ const RideModal = ({ open, close, ride, editSingle }: RideModalProps) => {
           formData={formData}
           onBack={goPrevPage}
           onSubmit={saveDataThen(goNextPage)}
+          labelid="ride-modal"
         />
         <RiderInfoPage
           formData={formData}