fix: accessibility issues

Author: ntatoud

app/components/form/field-radio-group/index.tsx

@@ -66,6 +66,10 @@ export const FieldRadioGroup = <
             <RadioGroup
               id={ctx.id}
               aria-invalid={fieldState.error ? true : undefined}
+              /**
+               * RadioGroup is a div with role `radiogroup`. the label's `for` is not working and we need to explicitly set the ARIA attribute.
+               */
+              aria-labelledby={ctx.labelId}
               aria-describedby={
                 !fieldState.error
                   ? `${ctx.descriptionId}`
@@ -76,9 +80,11 @@ export const FieldRadioGroup = <
               {...field}
             >
               {options.map(({ label, ...option }) => {
+                const radioId = `${ctx.id}-${option.value}`;
+
                 if (renderOption) {
                   return (
-                    <React.Fragment key={`${ctx.id}-${option.value}`}>
+                    <React.Fragment key={radioId}>
                       {renderOption({
                         label,
                         onBlur,
@@ -89,11 +95,7 @@ export const FieldRadioGroup = <
                 }
 
                 return (
-                  <Radio
-                    key={`${ctx.id}-${option.value}`}
-                    onBlur={onBlur}
-                    {...option}
-                  >
+                  <Radio key={radioId} onBlur={onBlur} {...option}>
                     {label}
                   </Radio>
                 );

app/components/form/form-field-helper.tsx

@@ -2,12 +2,16 @@ import { ComponentProps } from 'react';
 
 import { cn } from '@/lib/tailwind/utils';
 
+import { useFormField } from '@/components/form/form-field';
+
 export const FormFieldHelper = ({
   className,
   ...props
 }: ComponentProps<'div'>) => {
+  const ctx = useFormField();
   return (
     <div
+      id={ctx.descriptionId}
       className={cn('text-xs text-muted-foreground', className)}
       {...props}
     />

app/components/form/form-field-label.tsx

@@ -4,7 +4,9 @@ import { cn } from '@/lib/tailwind/utils';
 
 import { useFormField } from './form-field';
 
-type FormFieldLabelProps = ComponentProps<'label'>;
+type FormFieldLabelProps = ComponentProps<'label'> & {
+  asDiv?: boolean;
+};
 
 export const FormFieldLabel = ({
   className,
@@ -13,6 +15,7 @@ export const FormFieldLabel = ({
   const ctx = useFormField();
   return (
     <label
+      id={ctx.labelId}
       htmlFor={ctx.id}
       className={cn('flex gap-1.5 align-baseline text-sm', className)}
       {...props}

app/components/form/form-field.tsx

@@ -18,6 +18,7 @@ export const FormField = (props: FormFieldProps) => {
   const contextValue = useMemo(
     () => ({
       id,
+      labelId: `${id}-label`,
       descriptionId: `${id}-description`,
       errorId: `${id}-error`,
       size: props.size,
@@ -36,6 +37,7 @@ export const FormField = (props: FormFieldProps) => {
 
 type FormFieldContextValue = {
   id: string;
+  labelId: string;
   descriptionId: string;
   errorId: string;
   size?: FormFieldSize;