Merge pull request #473 from cornell-dti/cww72/aria-labels

Add ARIA Labels to different components
cornell-dti · Sep 20, 2024 · 2bc2518 · 2bc2518
2 parents 1369ed8 + e16c4bb
commit 2bc2518
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 16 deletions.
diff --git a/frontend/src/components/EmployeeModal/EmployeeModal.tsx b/frontend/src/components/EmployeeModal/EmployeeModal.tsx
@@ -81,6 +81,15 @@ const EmployeeModal = ({
     setIsOpen(false);
   };
 
+  /**
+   * Converts availabilities expressed as an array of {starTime, endTime, days}
+   * objects into an object mapping the day to the start and end time of each
+   * availability period
+   *
+   * @param availability the availibity array to convert
+   * @returns the availibity array expressed as an object mapping the day to
+   * the start and end time of each availibility period
+   */
   const parseAvailability = (availability: ObjectType[]) => {
     const result: ObjectType = {};
     availability.forEach(({ startTime, endTime, days }) => {
@@ -306,13 +315,21 @@ const EmployeeModal = ({
   }
   return (
     <>
-      <Modal title={modalTitle} isOpen={isOpen} onClose={closeModal}>
+      <Modal
+        title={modalTitle}
+        isOpen={isOpen}
+        onClose={closeModal}
+        id="employee-modal"
+      >
         <Upload
           imageChange={updateBase64}
           existingPhoto={existingEmployee?.photoLink}
         />
         <FormProvider {...methods}>
-          <form onSubmit={methods.handleSubmit(onSubmit)}>
+          <form
+            onSubmit={methods.handleSubmit(onSubmit)}
+            aria-labelledby="employee-modal"
+          >
             <EmployeeInfo
               firstName={existingEmployee?.firstName}
               lastName={existingEmployee?.lastName}

diff --git a/frontend/src/components/LocationModal/LocationModal.tsx b/frontend/src/components/LocationModal/LocationModal.tsx
@@ -94,8 +94,16 @@ const LocationModal = ({
       ) : (
         <Button onClick={openModal}>+ Add a location</Button>
       )}
-      <Modal title={modalTitle} isOpen={isOpen} onClose={closeModal}>
-        <form onSubmit={handleSubmit(onSubmit)}>
+      <Modal
+        title={modalTitle}
+        isOpen={isOpen}
+        onClose={closeModal}
+        id="location-modal"
+      >
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          aria-labelledby="location-modal"
+        >
           <div className={styles.inputContainer}>
             <Label htmlFor="name">Name</Label>
             <Input

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}>
+    <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
@@ -35,6 +35,8 @@ type ModalProps = {
   onClose?: () => void;
   displayClose?: boolean;
   isRider?: boolean;
+  id?: string;
+  arialabelledby?: string;
 };
 
 const Modal = ({
@@ -46,6 +48,8 @@ const Modal = ({
   onClose,
   displayClose,
   isRider = true,
+  arialabelledby,
+  id = 'modal',
 }: ModalProps) => {
   // Wrapping children in Array to match type for numPages
   const pages = paginate ? (children as React.ReactNodeArray) : [children];
@@ -69,12 +73,21 @@ const Modal = ({
             }}
           >
             <div className={styles.background}>
-              <div className={styles.modal}>
+              <div
+                className={styles.modal}
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby={arialabelledby ?? id}
+              >
                 <div className={styles.topContainer}>
                   {isRider ? (
-                    <h1 className={styles.title}>{currentTitle}</h1>
+                    <h1 className={styles.title} id={id}>
+                      {currentTitle}
+                    </h1>
                   ) : (
-                    <div className={styles.title}>{currentTitle}</div>
+                    <div className={styles.title} id={id}>
+                      {currentTitle}
+                    </div>
                   )}
                   {!displayClose && isRider && (
                     <button

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/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
@@ -100,11 +100,24 @@ const RideModal = ({ open, close, ride, editSingle }: RideModalProps) => {
 
   const submitData = () => setIsSubmitted(true);
 
+  /**
+   * Converts a ride that repeats into a number array representation used by
+   * the internal representation of a ride
+   *
+   * @param date a string representation of the ride start date
+   * @param repeats an enum representing how often this ride repeats: Daily,
+   * Weekly, or Custom
+   * @param days Used if the ride repeats on custom days. An object that
+   * maps days (Mon, Tue, Wed, Thur, Fri) to strings, where the string value is
+   * non-empty if the ride repeats on that day
+   * @returns a number array containing the days of the week where the ride repeats,
+   * with Monday represented as 1, Tuesday represented as 2, etc.
+   */
   const getRecurringDays = (
     date: string,
     repeats: RepeatValues,
     days: ObjectType
-  ) => {
+  ): number[] => {
     switch (repeats) {
       case RepeatValues.Daily:
         return [1, 2, 3, 4, 5];
@@ -227,6 +240,7 @@ const RideModal = ({ open, close, ride, editSingle }: RideModalProps) => {
         isOpen={isOpen}
         currentPage={currentPage}
         onClose={closeModal}
+        id="ride-modal"
       >
         <RideTimesPage
           formData={formData}
@@ -236,6 +250,7 @@ const RideModal = ({ open, close, ride, editSingle }: RideModalProps) => {
           formData={formData}
           onBack={goPrevPage}
           onSubmit={saveDataThen(goNextPage)}
+          labelid="ride-modal"
         />
         <RiderInfoPage
           formData={formData}