From ea3017cbf042910dcaa35626b0193ea31563d858 Mon Sep 17 00:00:00 2001
From: Praveen Kumar D <62658404+praveenreddy1798@users.noreply.github.com>
Date: Thu, 25 May 2023 14:35:10 +0530
Subject: [PATCH] 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>
---
 packages/ui/components/form/checkbox/Checkbox.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
index 06b2268c3b..f35022e315 100644
--- a/packages/ui/components/form/checkbox/Checkbox.tsx
+++ b/packages/ui/components/form/checkbox/Checkbox.tsx
@@ -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