fix: improve semantic by using label instead of div

getlago · Dec 16, 2024 · f279be5 · f279be5
1 parent d0a06af
commit f279be5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/components/form/Radio/Radio.tsx b/src/components/form/Radio/Radio.tsx
@@ -17,7 +17,7 @@ export interface RadioProps {
   onChange?: (value: string | number | boolean) => void
 }
 
-export const Radio = forwardRef<HTMLDivElement, RadioProps>(
+export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
   (
     { name, checked, label, labelVariant, sublabel, disabled, value, onChange }: RadioProps,
     ref,
@@ -28,10 +28,9 @@ export const Radio = forwardRef<HTMLDivElement, RadioProps>(
     const [focused, setFocused] = useState(false)
 
     return (
-      //  eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-      <div
-        onClick={() => inputRef.current?.click()}
+      <label
         ref={ref}
+        htmlFor={componentId}
         className={tw('flex w-full items-start', !disabled && 'group/radio-icon cursor-pointer')}
       >
         <div className="mr-3 flex items-start pt-1">
@@ -41,6 +40,7 @@ export const Radio = forwardRef<HTMLDivElement, RadioProps>(
             ref={inputRef}
             disabled={disabled}
             aria-label={name}
+            name={name}
             {...(isBoolean(value) ? { checked: value } : { value: value })}
             type="radio"
             onClick={() => onChange && onChange(value)}
@@ -68,7 +68,7 @@ export const Radio = forwardRef<HTMLDivElement, RadioProps>(
               sublabel
             ))}
         </div>
-      </div>
+      </label>
     )
   },
 )

diff --git a/src/components/form/Radio/RadioField.tsx b/src/components/form/Radio/RadioField.tsx
@@ -12,7 +12,7 @@ export interface RadioFieldProps extends Omit<RadioProps, 'checked' | 'name'> {
 }
 
 export const RadioField = memo(
-  forwardRef<HTMLInputElement, RadioFieldProps>(
+  forwardRef<HTMLLabelElement, RadioFieldProps>(
     ({ name, value, formikProps, ...props }: RadioFieldProps, ref) => {
       const { values, setFieldValue } = formikProps