refactor(a11y): Textareas use id instead of name for labels

DiggidyDev · Mar 25, 2024 · d41c9be · d41c9be
1 parent 92cfd86
commit d41c9be
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/src/app/components/TextArea/TextArea.tsx b/src/app/components/TextArea/TextArea.tsx
@@ -20,12 +20,13 @@ export function TextArea({
     ...props
 }: TextAreaProps) {
     name = name ?? label.toLowerCase();
+    name = name.replaceAll(" ", "-");
 
     return (
         <div data-cy={testId} className="flex w-full flex-col text-center">
             <Label text={label} htmlFor={name} />
             <StyledTextArea
-                name={name}
+                id={name}
                 onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
                     setValue?.(e.target.value)
                 }
@@ -49,7 +50,7 @@ TextArea.Loading = ({ label = "Loading...", ...props }: LoadingProps) => (
         <StyledTextArea
             className="duration-1000 animate-pulse disabled:bg-gray-300"
             disabled
-            name="loading"
+            id="loading"
             {...props}
         />
     </div>