fix (a11): add aria-invalid to career form fields (#817)

* fix (a11y): add aria-invalid to career form fields * chore: simply aria-invalid checks * fix (a11y): add aria-descirbedby to all input elements fix (a11y): add aria-labeledby to checkbox * fix: only add aria-labelledby to checkbox it there is a label * fix (a11y): set aria-required to the correct value * fix (a11y): aria-hide checkmark svg --------- Co-authored-by: noa.santo <[email protected]>
satellytes · Sep 22, 2024 · 8c90534 · 8c90534
1 parent e6b777f
commit 8c90534
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/src/components/forms/checkbox/checkbox.tsx b/src/components/forms/checkbox/checkbox.tsx
@@ -49,14 +49,14 @@ const StyledCheckbox = styled.input.attrs({
   }
 `;
 
-const StyledIcon = styled(Icon)`
+const StyledIcon = styled(Icon).attrs({ ariaHidden: true })`
   position: absolute;
   pointer-events: none;
 `;
 
-const CheckboxLabelTextWrapper = ({ label, required }) => {
+const CheckboxLabelTextWrapper = ({ label, required, id }) => {
   return (
-    <CheckboxLabelText>
+    <CheckboxLabelText id={id}>
       {label} {required && <span aria-hidden={true}>*</span>}
     </CheckboxLabelText>
   );
@@ -72,7 +72,10 @@ export const Checkbox = (
     <div style={{ position: 'relative' }}>
       <CheckboxLabel>
         <StyledCheckbox
-          aria-required={true}
+          aria-required={Boolean(props.rules?.required)}
+          aria-describedby={errorMessage && `${props.name}-error`}
+          aria-labelledby={props.label && `${props.name}-label`}
+          aria-invalid={Boolean(errorMessage)}
           disabled={formState.isSubmitting}
           {...field}
           id={props.name}
@@ -81,12 +84,17 @@ export const Checkbox = (
         {field.value && <StyledIcon show="checkmark_bold" />}
         {props.label && (
           <CheckboxLabelTextWrapper
+            id={`${props.name}-label`}
             label={props.label}
             required={props.rules?.required}
           />
         )}
       </CheckboxLabel>
-      {errorMessage && <StyledErrorMessage>{errorMessage}</StyledErrorMessage>}
+      {errorMessage && (
+        <StyledErrorMessage id={`${props.name}-error`}>
+          {errorMessage}
+        </StyledErrorMessage>
+      )}
     </div>
   );
 };
diff --git a/src/components/forms/file-dropper/file-dropper.tsx b/src/components/forms/file-dropper/file-dropper.tsx
@@ -211,7 +211,11 @@ export const FileDropper = ({
         $hasErrors={Boolean(errors?.documents)}
       >
         <StyledLabel>
-          <input {...getInputProps({ ...register(name) })} />
+          <input
+            {...getInputProps({ ...register(name) })}
+            aria-invalid={Boolean(errors?.documents)}
+            aria-describedby={errors?.documents && `${name}-error`}
+          />
         </StyledLabel>
         {!hasFiles && illustration && (
           <Illustration show={illustration} size={IllustrationSize.NORMAL} />
@@ -235,7 +239,7 @@ export const FileDropper = ({
       ))}
 
       {errors?.documents && (
-        <StyledErrorMessage>
+        <StyledErrorMessage id={`${name}-error`}>
           {errors.documents.message as unknown as string}
         </StyledErrorMessage>
       )}

diff --git a/src/components/forms/text-area/text-area.tsx b/src/components/forms/text-area/text-area.tsx
@@ -46,7 +46,9 @@ export const TextArea = (
         </Label>
       )}
       <StyledTextArea
-        aria-required={true}
+        aria-required={Boolean(props.rules?.required)}
+        aria-describedby={errorMessage && `${props.name}-error`}
+        aria-invalid={Boolean(errorMessage)}
         $hasError={Boolean(errorMessage)}
         disabled={formState.isSubmitting}
         {...field}
@@ -56,7 +58,11 @@ export const TextArea = (
         placeholder={props.placeholder}
       />
 
-      {errorMessage && <StyledErrorMessage>{errorMessage}</StyledErrorMessage>}
+      {errorMessage && (
+        <StyledErrorMessage id={`${props.name}-error`}>
+          {errorMessage}
+        </StyledErrorMessage>
+      )}
     </div>
   );
 };
diff --git a/src/components/forms/text-input/text-input.tsx b/src/components/forms/text-input/text-input.tsx
@@ -65,15 +65,21 @@ export const TextInput = (
       )}
       <Input
         type={'text'}
-        aria-required={true}
+        aria-required={Boolean(props.rules?.required)}
+        aria-describedby={errorMessage && `${props.name}-error`}
+        aria-invalid={Boolean(errorMessage)}
         $hasError={Boolean(errorMessage)}
         disabled={formState.isSubmitting}
         id={props.name}
         placeholder={props.placeholder}
         {...field}
         value={(field?.value as string) || ''}
       />
-      {errorMessage && <StyledErrorMessage>{errorMessage}</StyledErrorMessage>}
+      {errorMessage && (
+        <StyledErrorMessage id={`${props.name}-error`}>
+          {errorMessage}
+        </StyledErrorMessage>
+      )}
     </div>
   );
 };