fix(webapp): separate checkbox names and descriptions

Author: carderne

apps/webapp/app/components/primitives/Checkbox.tsx

@@ -86,6 +86,12 @@ export const CheckboxWithLabel = React.forwardRef<HTMLInputElement, CheckboxProp
   ) => {
     const [isChecked, setIsChecked] = useState<boolean>(defaultChecked ?? false);
     const [isDisabled, setIsDisabled] = useState<boolean>(disabled ?? false);
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const labelId = `${inputId}-label`;
+    const descriptionId = `${inputId}-description`;
+    const ariaLabelledBy =
+      props["aria-label"] || props["aria-labelledby"] ? props["aria-labelledby"] : labelId;
 
     const buttonClassName = variants[variant].button;
     const labelClassName = variants[variant].label;
@@ -125,6 +131,11 @@ export const CheckboxWithLabel = React.forwardRef<HTMLInputElement, CheckboxProp
           type="checkbox"
           value={value}
           checked={isChecked}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={
+            props["aria-describedby"] ??
+            (variant === "description" && description ? descriptionId : undefined)
+          }
           onChange={(e) => {
             if (isDisabled || props.readOnly === true) return;
             setIsChecked(e.target.checked);
@@ -139,12 +150,13 @@ export const CheckboxWithLabel = React.forwardRef<HTMLInputElement, CheckboxProp
             (isDisabled || props.readOnly) &&
               "bg-background-raised! checked:bg-background-raised! checked:group-hover:bg-background-raised! group-hover:bg-background-raised!"
           )}
-          id={id}
+          id={inputId}
           ref={ref}
         />
         <div>
           <div className="flex items-center gap-x-2">
             <span
+              id={labelId}
               className={cn(
                 props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
                 labelClassName,
@@ -162,7 +174,11 @@ export const CheckboxWithLabel = React.forwardRef<HTMLInputElement, CheckboxProp
             )}
           </div>
           {variant === "description" && (
-            <Paragraph variant="small" className={cn("mt-0.5", descriptionClassName)}>
+            <Paragraph
+              id={descriptionId}
+              variant="small"
+              className={cn("mt-0.5", descriptionClassName)}
+            >
               {description}
             </Paragraph>
           )}