public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: checkbox accessibility issues (#9095) 

* fix: checkbox accessibility

* chore: pass id only if rest.id is not present

---------

Co-authored-by: Praveen Kumar <praveenkumar@Praveens-MacBook-Pro.local>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
pull/8975/head^2
Praveen Kumar D 2023-05-25 14:35:10 +05:30 committed by GitHub
parent 734382b5b3
commit ea3017cbf0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/ui/components/form/checkbox/Checkbox.tsx
View File

@ -1,3 +1,4 @@
import { useId } from "@radix-ui/react-id";
import type { InputHTMLAttributes } from "react";
import React, { forwardRef } from "react";
@ -16,6 +17,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
const CheckboxField = forwardRef<HTMLInputElement, Props>(
({ label, description, error, disabled, ...rest }, ref) => {
const descriptionAsLabel = !label || rest.descriptionAsLabel;
const id = useId();
return (
<div className="block items-center sm:flex">
{label && (
@ -26,7 +28,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
className: classNames("flex text-sm font-medium text-emphasis"),
...(!descriptionAsLabel
? {
htmlFor: rest.id,
htmlFor: rest.id ? rest.id : id,
}
: {}),
},
@ -52,6 +54,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
ref={ref}
type="checkbox"
disabled={disabled}
id={rest.id ? rest.id : id}
className={classNames(
"text-primary-600 focus:ring-primary-500 border-default bg-default h-4 w-4 rounded ltr:mr-2 rtl:ml-2",
!error && disabled