Improve accessibility for teacher selection fields

Added unique aria-labelledby attributes and label IDs to the AdminTeacherFields and SearchDropdown components to enhance accessibility. Also fixed minor formatting in DeclareAbsenceForm. These changes ensure better screen reader support for form fields.

Author: ChinemeremChigbo

src/components/absences/modals/AdminTeacherFields.tsx

@@ -4,6 +4,7 @@ import {
   FormLabel,
   Text,
 } from '@chakra-ui/react';
+import { useId } from 'react';
 import { SearchDropdown } from './SearchDropdown';
 
 interface AdminTeacherFieldsProps {
@@ -28,14 +29,21 @@ export const AdminTeacherFields: React.FC<AdminTeacherFieldsProps> = ({
   setFormData,
   setErrors,
 }) => {
+  const id = useId();
+
   return (
     <>
       <FormControl isRequired isInvalid={!!errors.absentTeacherId}>
-        <FormLabel htmlFor="absentTeacher" sx={{ display: 'flex' }}>
+        <FormLabel
+          id={'absentTeacherLabel' + id}
+          as="p"
+          sx={{ display: 'flex' }}
+        >
           <Text textStyle="h4">Teacher Absent</Text>
         </FormLabel>
         <SearchDropdown
           id="absentTeacher"
+          ariaLabelledBy={'absentTeacherLabel' + id}
           excludedId={formData.substituteTeacherId}
           defaultValueId={Number(formData.absentTeacherId)}
           onChange={(value) => {
@@ -55,11 +63,16 @@ export const AdminTeacherFields: React.FC<AdminTeacherFieldsProps> = ({
       </FormControl>
 
       <FormControl>
-        <FormLabel htmlFor="substituteTeacher" sx={{ display: 'flex' }}>
+        <FormLabel
+          id={'substituteTeacherLabel' + id}
+          as="p"
+          sx={{ display: 'flex' }}
+        >
           <Text textStyle="h4">Substitute Teacher</Text>
         </FormLabel>
         <SearchDropdown
           id="substituteTeacher"
+          ariaLabelledBy={'substituteTeacherLabel' + id}
           excludedId={formData.absentTeacherId}
           defaultValueId={
             formData.substituteTeacherId

src/components/absences/modals/SearchDropdown.tsx

@@ -21,13 +21,15 @@ export type Option = { name: string; id: number; profilePicture: string };
 
 interface SearchDropdownProps {
   id: string;
+  ariaLabelledBy: string;
   excludedId?: string;
   defaultValueId?: number;
   onChange: (value: Option | null) => void;
 }
 
 export const SearchDropdown: React.FC<SearchDropdownProps> = ({
   id,
+  ariaLabelledBy,
   excludedId,
   defaultValueId,
   onChange,
@@ -174,6 +176,7 @@ export const SearchDropdown: React.FC<SearchDropdownProps> = ({
               id={id}
               name={id}
               ref={inputRef}
+              aria-labelledby={ariaLabelledBy}
               value={searchQuery}
               onChange={isSelected ? undefined : handleSearchChange}
               onClick={() => {

src/components/absences/modals/declare/DeclareAbsenceForm.tsx

@@ -14,7 +14,7 @@ import { Absence, Prisma } from '@prisma/client';
 import { formatFullDate } from '@utils/dates';
 import { submitAbsence } from '@utils/submitAbsence';
 import { validateAbsenceForm } from '@utils/validateAbsenceForm';
-import { useState, useId } from 'react';
+import { useId, useState } from 'react';
 import { useCustomToast } from '../../../CustomToast';
 import { FileUpload } from '../../FileUpload';
 import { AdminTeacherFields } from '../AdminTeacherFields';
@@ -340,7 +340,7 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
 
         <FormControl isRequired isInvalid={!!errors.subjectId}>
           <FormLabel id={'subjectLabel' + id} as="p" sx={{ display: 'flex' }}>
-            <Text textStyle="h4"> Subject</Text>
+            <Text textStyle="h4">Subject</Text>
           </FormLabel>
           <InputDropdown
             ariaLabelledBy={'subjectLabel' + id}