Improve a11y

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/package.json

@@ -66,7 +66,6 @@
     "mini-css-extract-plugin": "^2.9.2",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
-    "react-hook-form": "^7.55.0",
     "react-router-dom": "^6.3.0",
     "storybook": "^8.6.8"
   },

packages/canon/report.api.md

@@ -1055,7 +1055,7 @@ export { Text_2 as Text };
 
 // @public (undocumented)
 export const TextField: React_2.ForwardRefExoticComponent<
-  TextFieldProps & React_2.RefAttributes<HTMLInputElement>
+  TextFieldProps & React_2.RefAttributes<HTMLDivElement>
 >;
 
 // @public (undocumented)
@@ -1063,6 +1063,7 @@ export interface TextFieldProps
   extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> {
   className?: string;
   description?: string;
+  error?: string | null;
   label?: string;
   name: string;
   size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;

packages/canon/src/components/TextField/TextField.styles.css

@@ -90,8 +90,8 @@
 }
 
 .canon-TextField--required {
-  color: var(--canon-fg-danger);
-  font-size: var(--canon-font-size-3);
+  color: var(--canon-fg-secondary);
+  font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   margin-left: var(--canon-space-1);
 }

packages/canon/src/components/TextField/TextField.tsx

@@ -32,7 +32,6 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
       name,
       error,
       required,
-      disabled,
       ...rest
     } = props;
 
@@ -40,31 +39,18 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
     const responsiveSize = useResponsiveValue(size);
 
     // Generate unique IDs for accessibility
-    const inputId = `textfield-${name}`;
-    const descriptionId = `${inputId}-description`;
-    const errorId = `${inputId}-error`;
+    const inputId = React.useId();
+    const descriptionId = React.useId();
+    const errorId = React.useId();
 
     return (
-      <div
-        className={clsx('canon-TextField', className)}
-        ref={ref}
-        role="group"
-        aria-labelledby={label ? inputId : undefined}
-        aria-describedby={clsx({
-          [descriptionId]: description,
-          [errorId]: error,
-        })}
-      >
+      <div className={clsx('canon-TextField', className)} ref={ref}>
         {label && (
-          <label
-            className="canon-TextField--label"
-            htmlFor={inputId}
-            id={inputId}
-          >
+          <label className="canon-TextField--label" htmlFor={inputId}>
             {label}
             {required && (
               <span aria-hidden="true" className="canon-TextField--required">
-                *
+                (Required)
               </span>
             )}
           </label>
@@ -76,7 +62,13 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
             'canon-TextField--input-size-small': responsiveSize === 'small',
             'canon-TextField--input-size-medium': responsiveSize === 'medium',
           })}
+          aria-labelledby={label ? inputId : undefined}
+          aria-describedby={clsx({
+            [descriptionId]: description,
+            [errorId]: error,
+          })}
           data-invalid={error}
+          required={required}
           {...rest}
         />
         {description && (

packages/canon/src/components/TextField/types.ts

@@ -45,5 +45,8 @@ export interface TextFieldProps
    */
   name: string;
 
+  /**
+   * The error message of the text field
+   */
   error?: string | null;
 }

yarn.lock

@@ -3800,7 +3800,6 @@ __metadata:
     mini-css-extract-plugin: "npm:^2.9.2"
     react: "npm:^18.0.2"
     react-dom: "npm:^18.0.2"
-    react-hook-form: "npm:^7.55.0"
     react-router-dom: "npm:^6.3.0"
     storybook: "npm:^8.6.8"
   peerDependencies:
@@ -41501,7 +41500,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-hook-form@npm:^7.12.2, react-hook-form@npm:^7.55.0":
+"react-hook-form@npm:^7.12.2":
   version: 7.55.0
   resolution: "react-hook-form@npm:7.55.0"
   peerDependencies: