Skip to content

Commit b4c4b53

Browse files
Shedayheath-freenomeEmiel van Lankveld
authored
Fix: shadcn radio widget label should be accessible. (#4697)
* Radio widget label should be accessible. * Update CHANGELOG.md * Lint. * Update changelog. * Update snapshots. --------- Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> Co-authored-by: Emiel van Lankveld <emiel@vanlankveld.me>
1 parent e6e3c99 commit b4c4b53

File tree

4 files changed

+24
-1
lines changed

4 files changed

+24
-1
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ should change the heading of the (upcoming) version to include a major version b
5656
- Bump `tailwindcss` to using v4 and css compiling process to use latest `@tailwindcss/cli`
5757
- Remove `postcss` due to new Oxide compiler of tailwindcss
5858
- Update playground themes with `default`, `Amethyst Haze`, `Caffeine`, `Claude`, `Neo Brutalism`, `Pastel Dreams`, `Soft Pop`, `Twitter`, `Vercel`
59+
- Radio widget labels are now accessible and can be clicked on to select the associated option.
5960

6061
## @rjsf/utils
6162

‎packages/shadcn/src/RadioWidget/RadioWidget.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,9 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
6767
id={optionId(id, index)}
6868
disabled={itemDisabled}
6969
/>
70-
<Label className='leading-tight'>{option.label}</Label>
70+
<Label className='leading-tight' htmlFor={optionId(id, index)}>
71+
{option.label}
72+
</Label>
7173
</div>
7274
);
7375
})}

‎packages/shadcn/test/__snapshots__/Form.test.tsx.snap

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1617,6 +1617,7 @@ exports[`single fields radio field 1`] = `
16171617
<label
16181618
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
16191619
data-slot="label"
1620+
htmlFor="root-0"
16201621
onMouseDown={[Function]}
16211622
>
16221623
Yes
@@ -1664,6 +1665,7 @@ exports[`single fields radio field 1`] = `
16641665
<label
16651666
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
16661667
data-slot="label"
1668+
htmlFor="root-1"
16671669
onMouseDown={[Function]}
16681670
>
16691671
No
@@ -2699,6 +2701,7 @@ exports[`single fields select field single choice enumDisabled using radio widge
26992701
<label
27002702
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
27012703
data-slot="label"
2704+
htmlFor="root-0"
27022705
onMouseDown={[Function]}
27032706
>
27042707
foo
@@ -2747,6 +2750,7 @@ exports[`single fields select field single choice enumDisabled using radio widge
27472750
<label
27482751
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
27492752
data-slot="label"
2753+
htmlFor="root-1"
27502754
onMouseDown={[Function]}
27512755
>
27522756
bar
@@ -2851,6 +2855,7 @@ exports[`single fields select field single choice form disabled using radio widg
28512855
<label
28522856
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
28532857
data-slot="label"
2858+
htmlFor="root-0"
28542859
onMouseDown={[Function]}
28552860
>
28562861
foo
@@ -2899,6 +2904,7 @@ exports[`single fields select field single choice form disabled using radio widg
28992904
<label
29002905
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
29012906
data-slot="label"
2907+
htmlFor="root-1"
29022908
onMouseDown={[Function]}
29032909
>
29042910
bar
@@ -3099,6 +3105,7 @@ exports[`single fields select field single choice uiSchema disabled using radio
30993105
<label
31003106
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
31013107
data-slot="label"
3108+
htmlFor="root-0"
31023109
onMouseDown={[Function]}
31033110
>
31043111
foo
@@ -3147,6 +3154,7 @@ exports[`single fields select field single choice uiSchema disabled using radio
31473154
<label
31483155
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
31493156
data-slot="label"
3157+
htmlFor="root-1"
31503158
onMouseDown={[Function]}
31513159
>
31523160
bar

‎packages/shadcn/test/__snapshots__/GridSnap.test.tsx.snap

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -865,6 +865,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
865865
<label
866866
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
867867
data-slot="label"
868+
htmlFor="root_employment-0"
868869
onMouseDown={[Function]}
869870
>
870871
Company
@@ -912,6 +913,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
912913
<label
913914
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
914915
data-slot="label"
916+
htmlFor="root_employment-1"
915917
onMouseDown={[Function]}
916918
>
917919
Education
@@ -959,6 +961,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
959961
<label
960962
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
961963
data-slot="label"
964+
htmlFor="root_employment-2"
962965
onMouseDown={[Function]}
963966
>
964967
Other
@@ -2026,6 +2029,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
20262029
<label
20272030
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
20282031
data-slot="label"
2032+
htmlFor="root_employment-0"
20292033
onMouseDown={[Function]}
20302034
>
20312035
Company
@@ -2099,6 +2103,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
20992103
<label
21002104
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
21012105
data-slot="label"
2106+
htmlFor="root_employment-1"
21022107
onMouseDown={[Function]}
21032108
>
21042109
Education
@@ -2146,6 +2151,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
21462151
<label
21472152
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
21482153
data-slot="label"
2154+
htmlFor="root_employment-2"
21492155
onMouseDown={[Function]}
21502156
>
21512157
Other
@@ -3252,6 +3258,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
32523258
<label
32533259
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
32543260
data-slot="label"
3261+
htmlFor="root_employment-0"
32553262
onMouseDown={[Function]}
32563263
>
32573264
Company
@@ -3299,6 +3306,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
32993306
<label
33003307
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
33013308
data-slot="label"
3309+
htmlFor="root_employment-1"
33023310
onMouseDown={[Function]}
33033311
>
33043312
Education
@@ -3372,6 +3380,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
33723380
<label
33733381
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
33743382
data-slot="label"
3383+
htmlFor="root_employment-2"
33753384
onMouseDown={[Function]}
33763385
>
33773386
Other
@@ -4304,6 +4313,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
43044313
<label
43054314
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
43064315
data-slot="label"
4316+
htmlFor="root_employment-0"
43074317
onMouseDown={[Function]}
43084318
>
43094319
Company
@@ -4351,6 +4361,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
43514361
<label
43524362
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
43534363
data-slot="label"
4364+
htmlFor="root_employment-1"
43544365
onMouseDown={[Function]}
43554366
>
43564367
Education
@@ -4398,6 +4409,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
43984409
<label
43994410
className="flex items-center gap-2 text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 leading-tight"
44004411
data-slot="label"
4412+
htmlFor="root_employment-2"
44014413
onMouseDown={[Function]}
44024414
>
44034415
Other

0 commit comments

Comments
 (0)