Skip to content

Commit 8bc09ad

Browse files
135zeChinemeremChigbo
135ze
authored and
ChinemeremChigbo
committed
add useId to label ids, fix labels in EditAbsenceForm
1 parent 17208dd commit 8bc09ad

File tree

4 files changed

+35
-26
lines changed

4 files changed

+35
-26
lines changed

‎src/components/absences/modals/DateOfAbsence.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
PopoverTrigger,
1010
Text,
1111
} from '@chakra-ui/react';
12-
import { useCallback, useEffect, useState } from 'react';
12+
import { useCallback, useEffect, useState, useId } from 'react';
1313
import MiniCalendar from '../../calendar/MiniCalendar';
1414

1515
interface DateOfAbsenceProps {
@@ -66,9 +66,11 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
6666
[onDateSelect]
6767
);
6868

69+
const id = useId();
70+
6971
return (
7072
<FormControl isRequired isInvalid={!!error}>
71-
<FormLabel as="p" id="dateOfAbsenceLabel" sx={{ display: 'flex' }}>
73+
<FormLabel as="p" id={'dateOfAbsenceLabel' + id} sx={{ display: 'flex' }}>
7274
<Text textStyle="h4">{label}</Text>
7375
</FormLabel>
7476
<Popover
@@ -80,7 +82,7 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
8082
<PopoverTrigger>
8183
<Box>
8284
<Input
83-
aria-labelledby="dateOfAbsenceLabel"
85+
aria-labelledby={'dateOfAbsenceLabel' + id}
8486
value={inputValue}
8587
onChange={handleInputChange}
8688
placeholder="YYYY-MM-DD"

‎src/components/absences/modals/InputDropdown.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ import { useCustomToast } from '../../CustomToast';
1818
export type Option = { name: string; id: number };
1919

2020
interface InputDropdownProps {
21-
labelledBy: string;
21+
ariaLabelledBy: string;
2222
label: string;
2323
type: 'location' | 'subject';
2424
onChange: (value: Option | null) => void;
2525
defaultValueId?: number;
2626
}
2727

2828
export const InputDropdown: React.FC<InputDropdownProps> = ({
29-
labelledBy,
29+
ariaLabelledBy,
3030
label,
3131
type,
3232
onChange,
@@ -122,7 +122,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
122122
value={selectedOption ? selectedOption.name : ''}
123123
readOnly
124124
_focusVisible={{ outline: 'none' }}
125-
aria-labelledby={labelledBy}
125+
aria-labelledby={ariaLabelledBy}
126126
/>
127127
<InputRightElement pointerEvents="none">
128128
{isOpen ? <IoChevronUp /> : <IoChevronDown />}

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { Absence, Prisma } from '@prisma/client';
1414
import { formatFullDate } from '@utils/dates';
1515
import { submitAbsence } from '@utils/submitAbsence';
1616
import { validateAbsenceForm } from '@utils/validateAbsenceForm';
17-
import { useState } from 'react';
17+
import { useState, useId } from 'react';
1818
import { useCustomToast } from '../../../CustomToast';
1919
import { FileUpload } from '../../FileUpload';
2020
import { AdminTeacherFields } from '../AdminTeacherFields';
@@ -317,6 +317,8 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
317317
const isUrgent =
318318
(selectedDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24) <= 7;
319319

320+
const id = useId();
321+
320322
return (
321323
<Box
322324
as="form"
@@ -337,11 +339,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
337339
)}
338340

339341
<FormControl isRequired isInvalid={!!errors.subjectId}>
340-
<FormLabel id="subjectLabel" as="p" sx={{ display: 'flex' }}>
341-
<Text textStyle="h4">Subject</Text>
342+
<FormLabel id={'subjectLabel' + id} as="p" sx={{ display: 'flex' }}>
343+
<Text textStyle="h4"> Subject</Text>
342344
</FormLabel>
343345
<InputDropdown
344-
labelledBy="subjectLabel"
346+
ariaLabelledBy={'subjectLabel' + id}
345347
label="subject"
346348
type="subject"
347349
onChange={(value) => {
@@ -361,11 +363,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
361363
</FormControl>
362364

363365
<FormControl isRequired isInvalid={!!errors.locationId}>
364-
<FormLabel id="locationLabel" as="p" sx={{ display: 'flex' }}>
366+
<FormLabel id={'locationLabel' + id} as="p" sx={{ display: 'flex' }}>
365367
<Text textStyle="h4">Location</Text>
366368
</FormLabel>
367369
<InputDropdown
368-
labelledBy="locationLabel"
370+
ariaLabelledBy={'locationLabel' + id}
369371
label="location"
370372
type="location"
371373
onChange={(value) => {
@@ -385,11 +387,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
385387
</FormControl>
386388

387389
<FormControl>
388-
<FormLabel id="roomNumberLabel" sx={{ display: 'flex' }}>
390+
<FormLabel id={'roomNumberLabel' + id} sx={{ display: 'flex' }}>
389391
<Text textStyle="h4">Room Number</Text>
390392
</FormLabel>
391393
<Input
392-
aria-labelledby="roomNumberLabel"
394+
aria-labelledby={'roomNumberLabel' + id}
393395
id="roomNumber"
394396
name="roomNumber"
395397
placeholder="e.g. 2131"
@@ -405,11 +407,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
405407
/>
406408

407409
<FormControl isRequired isInvalid={!!errors.reasonOfAbsence}>
408-
<FormLabel id="reasonOfAbsenceLabel" sx={{ display: 'flex' }}>
410+
<FormLabel id={'reasonOfAbsenceLabel' + id} sx={{ display: 'flex' }}>
409411
<Text textStyle="h4">Reason of Absence</Text>
410412
</FormLabel>
411413
<Textarea
412-
aria-labelledby="reasonOfAbsenceLabel"
414+
aria-labelledby={'reasonOfAbsenceLabel' + id}
413415
id="reasonOfAbsence"
414416
name="reasonOfAbsence"
415417
placeholder="Only visible to admin"
@@ -428,11 +430,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
428430
</FormControl>
429431

430432
<FormControl>
431-
<FormLabel id="notesLabel" sx={{ display: 'flex' }}>
433+
<FormLabel id={'notesLabel' + id} sx={{ display: 'flex' }}>
432434
<Text textStyle="h4">Notes</Text>
433435
</FormLabel>
434436
<Textarea
435-
aria-labelledby="notesLabel"
437+
aria-labelledby={'notesLabel' + id}
436438
id="notes"
437439
name="notes"
438440
placeholder="Visible to everyone"

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { formatFullDate } from '@utils/dates';
1717
import { submitAbsence } from '@utils/submitAbsence';
1818
import { EventDetails } from '@utils/types';
1919
import { validateAbsenceForm } from '@utils/validateAbsenceForm';
20-
import { useState } from 'react';
20+
import { useState, useId } from 'react';
2121
import { IoMailOutline } from 'react-icons/io5';
2222
import { useCustomToast } from '../../../CustomToast';
2323
import { FileUpload } from '../../FileUpload';
@@ -282,6 +282,8 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
282282
}
283283
};
284284

285+
const id = useId();
286+
285287
return (
286288
<Box
287289
as="form"
@@ -300,11 +302,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
300302
)}
301303

302304
<FormControl isRequired isInvalid={!!errors.subjectId}>
303-
<FormLabel id="subjectLabel" as="p" sx={{ display: 'flex' }}>
305+
<FormLabel id={'subjectLabel' + id} as="p" sx={{ display: 'flex' }}>
304306
<Text textStyle="h4">Subject</Text>
305307
</FormLabel>
306308
<InputDropdown
307-
labelledBy="subjectLabel"
309+
ariaLabelledBy={'subjectLabel' + id}
308310
label="subject"
309311
type="subject"
310312
onChange={(value) => {
@@ -325,11 +327,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
325327
</FormControl>
326328

327329
<FormControl isRequired isInvalid={!!errors.locationId}>
328-
<FormLabel id="locationLabel" as="p" sx={{ display: 'flex' }}>
330+
<FormLabel id={'locationLabel' + id} as="p" sx={{ display: 'flex' }}>
329331
<Text textStyle="h4">Location</Text>
330332
</FormLabel>
331333
<InputDropdown
332-
labelledBy="locationLabel"
334+
ariaLabelledBy={'locationLabel' + id}
333335
label="location"
334336
type="location"
335337
onChange={(value) => {
@@ -350,10 +352,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
350352
</FormControl>
351353

352354
<FormControl>
353-
<FormLabel htmlFor="roomNumber" sx={{ display: 'flex' }}>
355+
<FormLabel id={'roomNumberLabel' + id} sx={{ display: 'flex' }}>
354356
<Text textStyle="h4">Room Number</Text>
355357
</FormLabel>
356358
<Input
359+
aria-labelledby={'roomNumberLabel' + id}
357360
id="roomNumber"
358361
name="roomNumber"
359362
placeholder="e.g. 2131"
@@ -369,10 +372,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
369372
/>
370373

371374
<FormControl isRequired isInvalid={!!errors.reasonOfAbsence}>
372-
<FormLabel htmlFor="reasonOfAbsence" sx={{ display: 'flex' }}>
375+
<FormLabel id={'reasonOfAbsenceLabel' + id} sx={{ display: 'flex' }}>
373376
<Text textStyle="h4">Reason of Absence</Text>
374377
</FormLabel>
375378
<Textarea
379+
aria-labelledby={'reasonOfAbsenceLabel' + id}
376380
id="reasonOfAbsence"
377381
name="reasonOfAbsence"
378382
placeholder="Only visible to admin"
@@ -395,10 +399,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
395399
</FormControl>
396400

397401
<FormControl>
398-
<FormLabel htmlFor="notes" sx={{ display: 'flex' }}>
402+
<FormLabel id={'notesLabel' + id} sx={{ display: 'flex' }}>
399403
<Text textStyle="h4">Notes</Text>
400404
</FormLabel>
401405
<Textarea
406+
aria-labelledby={'notesLabel' + id}
402407
id="notes"
403408
name="notes"
404409
placeholder="Visible to everyone"

0 commit comments

Comments
 (0)