change label to p to prevent label click-through onto input

Author: 135ze

src/components/absences/modals/DateOfAbsence.tsx

@@ -65,7 +65,7 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
 
   return (
     <FormControl isRequired isInvalid={!!error}>
-      <FormLabel sx={{ display: 'flex' }}>
+      <FormLabel as="p" id="dateOfAbsenceLabel" sx={{ display: 'flex' }}>
         <Text textStyle="h4">{label}</Text>
       </FormLabel>
       <Popover
@@ -77,6 +77,7 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
         <PopoverTrigger>
           <Box>
             <Input
+              aria-labelledby="dateOfAbsenceLabel"
               value={inputValue}
               onChange={handleInputChange}
               placeholder="YYYY-MM-DD"

src/components/absences/modals/InputDropdown.tsx

@@ -18,13 +18,15 @@ import { useCustomToast } from '../../CustomToast';
 export type Option = { name: string; id: number };
 
 interface InputDropdownProps {
+  labelledBy: string;
   label: string;
   type: 'location' | 'subject';
   onChange: (value: Option | null) => void;
   defaultValueId?: number;
 }
 
 export const InputDropdown: React.FC<InputDropdownProps> = ({
+  labelledBy,
   label,
   type,
   onChange,
@@ -120,6 +122,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
             value={selectedOption ? selectedOption.name : ''}
             readOnly
             _focusVisible={{ outline: 'none' }}
+            aria-labelledby={labelledBy}
           />
           <InputRightElement pointerEvents="none">
             {isOpen ? <IoChevronUp /> : <IoChevronDown />}

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

@@ -329,10 +329,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
         )}
 
         <FormControl isRequired isInvalid={!!errors.subjectId}>
-          <FormLabel sx={{ display: 'flex' }}>
+          <FormLabel id="subjectLabel" as="p" sx={{ display: 'flex' }}>
             <Text textStyle="h4">Subject</Text>
           </FormLabel>
           <InputDropdown
+            labelledBy="subjectLabel"
             label="subject"
             type="subject"
             onChange={(value) => {
@@ -352,10 +353,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
         </FormControl>
 
         <FormControl isRequired isInvalid={!!errors.locationId}>
-          <FormLabel sx={{ display: 'flex' }}>
+          <FormLabel id="locationLabel" as="p" sx={{ display: 'flex' }}>
             <Text textStyle="h4">Location</Text>
           </FormLabel>
           <InputDropdown
+            labelledBy="locationLabel"
             label="location"
             type="location"
             onChange={(value) => {
@@ -373,29 +375,33 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
           />
           <FormErrorMessage>{errors.locationId}</FormErrorMessage>
         </FormControl>
+
         <FormControl>
-          <FormLabel htmlFor="roomNumber" sx={{ display: 'flex' }}>
+          <FormLabel id="roomNumberLabel" sx={{ display: 'flex' }}>
             <Text textStyle="h4">Room Number</Text>
           </FormLabel>
           <Input
+            aria-labelledby="roomNumberLabel"
             id="roomNumber"
             name="roomNumber"
             placeholder="e.g. 2131"
             value={formData.roomNumber}
             onChange={handleChange}
           />
         </FormControl>
+
         <DateOfAbsence
           dateValue={initialDate}
           onDateSelect={handleDateSelect}
           error={errors.lessonDate}
         />
 
         <FormControl isRequired isInvalid={!!errors.reasonOfAbsence}>
-          <FormLabel htmlFor="reasonOfAbsence" sx={{ display: 'flex' }}>
+          <FormLabel id="reasonOfAbsenceLabel" sx={{ display: 'flex' }}>
             <Text textStyle="h4">Reason of Absence</Text>
           </FormLabel>
           <Textarea
+            aria-labelledby="reasonOfAbsenceLabel"
             id="reasonOfAbsence"
             name="reasonOfAbsence"
             placeholder="Only visible to admin"
@@ -414,10 +420,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
         </FormControl>
 
         <FormControl>
-          <FormLabel htmlFor="notes" sx={{ display: 'flex' }}>
+          <FormLabel id="notesLabel" sx={{ display: 'flex' }}>
             <Text textStyle="h4">Notes</Text>
           </FormLabel>
           <Textarea
+            aria-labelledby="notesLabel"
             id="notes"
             name="notes"
             placeholder="Visible to everyone"

src/components/absences/modals/edit/EditAbsenceForm.tsx

@@ -291,10 +291,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
         )}
 
         <FormControl isRequired isInvalid={!!errors.subjectId}>
-          <FormLabel sx={{ display: 'flex' }}>
+          <FormLabel id="subjectLabel" as="p" sx={{ display: 'flex' }}>
             <Text textStyle="h4">Subject</Text>
           </FormLabel>
           <InputDropdown
+            labelledBy="subjectLabel"
             label="subject"
             type="subject"
             onChange={(value) => {
@@ -315,10 +316,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
         </FormControl>
 
         <FormControl isRequired isInvalid={!!errors.locationId}>
-          <FormLabel sx={{ display: 'flex' }}>
+          <FormLabel id="locationLabel" as="p" sx={{ display: 'flex' }}>
             <Text textStyle="h4">Location</Text>
           </FormLabel>
           <InputDropdown
+            labelledBy="locationLabel"
             label="location"
             type="location"
             onChange={(value) => {