Skip to content

Fix: shadcn radio widget label should be accessible. #4697

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Aug 17, 2025
Merged

Fix: shadcn radio widget label should be accessible. #4697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bf85d5a
Radio widget label should be accessible.
Sheday Jul 23, 2025
1555a44
Merge branch 'main' into patch-1
heath-freenome Jul 25, 2025
da9fc8c
Update CHANGELOG.md
Sheday Aug 5, 2025
c142709
Merge branch 'rjsf-team:main' into patch-1
Sheday Aug 14, 2025
9195422
Lint.
Aug 14, 2025
f648141
Merge branch 'main' into patch-1
Aug 16, 2025
68b327b
Update changelog.
Aug 16, 2025
f9f224f
Update snapshots.
Aug 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ should change the heading of the (upcoming) version to include a major version b
- Bump `tailwindcss` to using v4 and css compiling process to use latest `@tailwindcss/cli`
- Remove `postcss` due to new Oxide compiler of tailwindcss
- Update playground themes with `default`, `Amethyst Haze`, `Caffeine`, `Claude`, `Neo Brutalism`, `Pastel Dreams`, `Soft Pop`, `Twitter`, `Vercel`
- Radio widget labels are now accessible and can be clicked on to select the associated option.

## @rjsf/utils

Expand Down
4 changes: 3 additions & 1 deletion packages/shadcn/src/RadioWidget/RadioWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,9 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
id={optionId(id, index)}
disabled={itemDisabled}
/>
<Label className='leading-tight'>{option.label}</Label>
<Label className='leading-tight' htmlFor={optionId(id, index)}>
{option.label}
</Label>
</div>
);
})}
Expand Down
8 changes: 8 additions & 0 deletions packages/shadcn/test/__snapshots__/Form.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1617,6 +1617,7 @@ exports[`single fields radio field 1`] = `
<label
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"
data-slot="label"
htmlFor="root-0"
onMouseDown={[Function]}
>
Yes
Expand Down Expand Up @@ -1664,6 +1665,7 @@ exports[`single fields radio field 1`] = `
<label
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"
data-slot="label"
htmlFor="root-1"
onMouseDown={[Function]}
>
No
Expand Down Expand Up @@ -2699,6 +2701,7 @@ exports[`single fields select field single choice enumDisabled using radio widge
<label
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"
data-slot="label"
htmlFor="root-0"
onMouseDown={[Function]}
>
foo
Expand Down Expand Up @@ -2747,6 +2750,7 @@ exports[`single fields select field single choice enumDisabled using radio widge
<label
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"
data-slot="label"
htmlFor="root-1"
onMouseDown={[Function]}
>
bar
Expand Down Expand Up @@ -2851,6 +2855,7 @@ exports[`single fields select field single choice form disabled using radio widg
<label
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"
data-slot="label"
htmlFor="root-0"
onMouseDown={[Function]}
>
foo
Expand Down Expand Up @@ -2899,6 +2904,7 @@ exports[`single fields select field single choice form disabled using radio widg
<label
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"
data-slot="label"
htmlFor="root-1"
onMouseDown={[Function]}
>
bar
Expand Down Expand Up @@ -3099,6 +3105,7 @@ exports[`single fields select field single choice uiSchema disabled using radio
<label
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"
data-slot="label"
htmlFor="root-0"
onMouseDown={[Function]}
>
foo
Expand Down Expand Up @@ -3147,6 +3154,7 @@ exports[`single fields select field single choice uiSchema disabled using radio
<label
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"
data-slot="label"
htmlFor="root-1"
onMouseDown={[Function]}
>
bar
Expand Down
12 changes: 12 additions & 0 deletions packages/shadcn/test/__snapshots__/GridSnap.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -865,6 +865,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
<label
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"
data-slot="label"
htmlFor="root_employment-0"
onMouseDown={[Function]}
>
Company
Expand Down Expand Up @@ -912,6 +913,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
<label
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"
data-slot="label"
htmlFor="root_employment-1"
onMouseDown={[Function]}
>
Education
Expand Down Expand Up @@ -959,6 +961,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
<label
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"
data-slot="label"
htmlFor="root_employment-2"
onMouseDown={[Function]}
>
Other
Expand Down Expand Up @@ -2026,6 +2029,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
<label
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"
data-slot="label"
htmlFor="root_employment-0"
onMouseDown={[Function]}
>
Company
Expand Down Expand Up @@ -2099,6 +2103,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
<label
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"
data-slot="label"
htmlFor="root_employment-1"
onMouseDown={[Function]}
>
Education
Expand Down Expand Up @@ -2146,6 +2151,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
<label
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"
data-slot="label"
htmlFor="root_employment-2"
onMouseDown={[Function]}
>
Other
Expand Down Expand Up @@ -3252,6 +3258,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
<label
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"
data-slot="label"
htmlFor="root_employment-0"
onMouseDown={[Function]}
>
Company
Expand Down Expand Up @@ -3299,6 +3306,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
<label
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"
data-slot="label"
htmlFor="root_employment-1"
onMouseDown={[Function]}
>
Education
Expand Down Expand Up @@ -3372,6 +3380,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
<label
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"
data-slot="label"
htmlFor="root_employment-2"
onMouseDown={[Function]}
>
Other
Expand Down Expand Up @@ -4304,6 +4313,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
<label
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"
data-slot="label"
htmlFor="root_employment-0"
onMouseDown={[Function]}
>
Company
Expand Down Expand Up @@ -4351,6 +4361,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
<label
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"
data-slot="label"
htmlFor="root_employment-1"
onMouseDown={[Function]}
>
Education
Expand Down Expand Up @@ -4398,6 +4409,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
<label
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"
data-slot="label"
htmlFor="root_employment-2"
onMouseDown={[Function]}
>
Other
Expand Down