Skip to content

Commit d4c171a

Browse files
135ze135ze
committed
add useId to label ids, fix labels in EditAbsenceForm
1 parent c677038 commit d4c171a

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 {
@@ -63,9 +63,11 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
6363
[onDateSelect]
6464
);
6565

66+
const id = useId();
67+
6668
return (
6769
<FormControl isRequired isInvalid={!!error}>
68-
<FormLabel as="p" id="dateOfAbsenceLabel" sx={{ display: 'flex' }}>
70+
<FormLabel as="p" id={'dateOfAbsenceLabel' + id} sx={{ display: 'flex' }}>
6971
<Text textStyle="h4">{label}</Text>
7072
</FormLabel>
7173
<Popover
@@ -77,7 +79,7 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
7779
<PopoverTrigger>
7880
<Box>
7981
<Input
80-
aria-labelledby="dateOfAbsenceLabel"
82+
aria-labelledby={'dateOfAbsenceLabel' + id}
8183
value={inputValue}
8284
onChange={handleInputChange}
8385
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';
@@ -310,6 +310,8 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
310310
const isUrgent =
311311
(selectedDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24) <= 7;
312312

313+
const id = useId();
314+
313315
return (
314316
<Box
315317
as="form"
@@ -329,11 +331,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
329331
)}
330332

331333
<FormControl isRequired isInvalid={!!errors.subjectId}>
332-
<FormLabel id="subjectLabel" as="p" sx={{ display: 'flex' }}>
333-
<Text textStyle="h4">Subject</Text>
334+
<FormLabel id={'subjectLabel' + id} as="p" sx={{ display: 'flex' }}>
335+
<Text textStyle="h4"> Subject</Text>
334336
</FormLabel>
335337
<InputDropdown
336-
labelledBy="subjectLabel"
338+
ariaLabelledBy={'subjectLabel' + id}
337339
label="subject"
338340
type="subject"
339341
onChange={(value) => {
@@ -353,11 +355,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
353355
</FormControl>
354356

355357
<FormControl isRequired isInvalid={!!errors.locationId}>
356-
<FormLabel id="locationLabel" as="p" sx={{ display: 'flex' }}>
358+
<FormLabel id={'locationLabel' + id} as="p" sx={{ display: 'flex' }}>
357359
<Text textStyle="h4">Location</Text>
358360
</FormLabel>
359361
<InputDropdown
360-
labelledBy="locationLabel"
362+
ariaLabelledBy={'locationLabel' + id}
361363
label="location"
362364
type="location"
363365
onChange={(value) => {
@@ -377,11 +379,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
377379
</FormControl>
378380

379381
<FormControl>
380-
<FormLabel id="roomNumberLabel" sx={{ display: 'flex' }}>
382+
<FormLabel id={'roomNumberLabel' + id} sx={{ display: 'flex' }}>
381383
<Text textStyle="h4">Room Number</Text>
382384
</FormLabel>
383385
<Input
384-
aria-labelledby="roomNumberLabel"
386+
aria-labelledby={'roomNumberLabel' + id}
385387
id="roomNumber"
386388
name="roomNumber"
387389
placeholder="e.g. 2131"
@@ -397,11 +399,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
397399
/>
398400

399401
<FormControl isRequired isInvalid={!!errors.reasonOfAbsence}>
400-
<FormLabel id="reasonOfAbsenceLabel" sx={{ display: 'flex' }}>
402+
<FormLabel id={'reasonOfAbsenceLabel' + id} sx={{ display: 'flex' }}>
401403
<Text textStyle="h4">Reason of Absence</Text>
402404
</FormLabel>
403405
<Textarea
404-
aria-labelledby="reasonOfAbsenceLabel"
406+
aria-labelledby={'reasonOfAbsenceLabel' + id}
405407
id="reasonOfAbsence"
406408
name="reasonOfAbsence"
407409
placeholder="Only visible to admin"
@@ -420,11 +422,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
420422
</FormControl>
421423

422424
<FormControl>
423-
<FormLabel id="notesLabel" sx={{ display: 'flex' }}>
425+
<FormLabel id={'notesLabel' + id} sx={{ display: 'flex' }}>
424426
<Text textStyle="h4">Notes</Text>
425427
</FormLabel>
426428
<Textarea
427-
aria-labelledby="notesLabel"
429+
aria-labelledby={'notesLabel' + id}
428430
id="notes"
429431
name="notes"
430432
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';
@@ -274,6 +274,8 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
274274
}
275275
};
276276

277+
const id = useId();
278+
277279
return (
278280
<Box
279281
as="form"
@@ -291,11 +293,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
291293
)}
292294

293295
<FormControl isRequired isInvalid={!!errors.subjectId}>
294-
<FormLabel id="subjectLabel" as="p" sx={{ display: 'flex' }}>
296+
<FormLabel id={'subjectLabel' + id} as="p" sx={{ display: 'flex' }}>
295297
<Text textStyle="h4">Subject</Text>
296298
</FormLabel>
297299
<InputDropdown
298-
labelledBy="subjectLabel"
300+
ariaLabelledBy={'subjectLabel' + id}
299301
label="subject"
300302
type="subject"
301303
onChange={(value) => {
@@ -316,11 +318,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
316318
</FormControl>
317319

318320
<FormControl isRequired isInvalid={!!errors.locationId}>
319-
<FormLabel id="locationLabel" as="p" sx={{ display: 'flex' }}>
321+
<FormLabel id={'locationLabel' + id} as="p" sx={{ display: 'flex' }}>
320322
<Text textStyle="h4">Location</Text>
321323
</FormLabel>
322324
<InputDropdown
323-
labelledBy="locationLabel"
325+
ariaLabelledBy={'locationLabel' + id}
324326
label="location"
325327
type="location"
326328
onChange={(value) => {
@@ -341,10 +343,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
341343
</FormControl>
342344

343345
<FormControl>
344-
<FormLabel htmlFor="roomNumber" sx={{ display: 'flex' }}>
346+
<FormLabel id={'roomNumberLabel' + id} sx={{ display: 'flex' }}>
345347
<Text textStyle="h4">Room Number</Text>
346348
</FormLabel>
347349
<Input
350+
aria-labelledby={'roomNumberLabel' + id}
348351
id="roomNumber"
349352
name="roomNumber"
350353
placeholder="e.g. 2131"
@@ -360,10 +363,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
360363
/>
361364

362365
<FormControl isRequired isInvalid={!!errors.reasonOfAbsence}>
363-
<FormLabel htmlFor="reasonOfAbsence" sx={{ display: 'flex' }}>
366+
<FormLabel id={'reasonOfAbsenceLabel' + id} sx={{ display: 'flex' }}>
364367
<Text textStyle="h4">Reason of Absence</Text>
365368
</FormLabel>
366369
<Textarea
370+
aria-labelledby={'reasonOfAbsenceLabel' + id}
367371
id="reasonOfAbsence"
368372
name="reasonOfAbsence"
369373
placeholder="Only visible to admin"
@@ -386,10 +390,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
386390
</FormControl>
387391

388392
<FormControl>
389-
<FormLabel htmlFor="notes" sx={{ display: 'flex' }}>
393+
<FormLabel id={'notesLabel' + id} sx={{ display: 'flex' }}>
390394
<Text textStyle="h4">Notes</Text>
391395
</FormLabel>
392396
<Textarea
397+
aria-labelledby={'notesLabel' + id}
393398
id="notes"
394399
name="notes"
395400
placeholder="Visible to everyone"

0 commit comments

Comments
 (0)