From 67353672c9cc72ad85ee5f12ff80c48a2e6fc8fb Mon Sep 17 00:00:00 2001
From: "noa.santo" <noa.santo@satellytes.com>
Date: Tue, 10 Sep 2024 17:59:35 +0200
Subject: [PATCH 1/6] fix (a11y): add aria-invalid to career form fields

---
 src/components/forms/checkbox/checkbox.tsx               | 7 ++++++-
 src/components/forms/file-dropper/file-dropper.tsx       | 5 ++++-
 src/components/forms/text-area/text-area.tsx             | 8 +++++++-
 src/components/forms/text-input/text-input.tsx           | 8 +++++++-
 .../new-career-form/career-form-fields.tsx               | 3 ++-
 .../pages/career-details/new-career-form/career-form.tsx | 9 ++++++++-
 6 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/forms/checkbox/checkbox.tsx b/src/components/forms/checkbox/checkbox.tsx
index 0085b7e9a..b2702b39c 100644
--- a/src/components/forms/checkbox/checkbox.tsx
+++ b/src/components/forms/checkbox/checkbox.tsx
@@ -6,6 +6,7 @@ import { TextStyles } from '../../typography';
 import { Icon } from '../../ui/icon/icon';
 import { StyledErrorMessage } from '../text-input/text-input';
 import { up } from '../../support/breakpoint';
+import { FormErrors } from '../../pages/career-details/new-career-form/career-form';
 
 const CheckboxLabel = styled.label`
   display: inline-flex;
@@ -66,7 +67,10 @@ const CheckboxLabelTextWrapper = ({ label, required }) => {
 };
 
 export const Checkbox = (
-  props: UseControllerProps<any> & { label: string | JSX.Element },
+  props: UseControllerProps<any> & {
+    label: string | JSX.Element;
+    errors: FormErrors;
+  },
 ) => {
   const { field, fieldState, formState } = useController(props);
   const errorMessage = fieldState?.error?.message;
@@ -89,6 +93,7 @@ export const Checkbox = (
           {...props}
           id={props.name}
           onChange={handleChange}
+          aria-invalid={Boolean(props.errors?.[props.name])}
         />
         <StyledCheckbox checked={checked} hasError={Boolean(fieldState?.error)}>
           <Icon show="checkmark_bold" />
diff --git a/src/components/forms/file-dropper/file-dropper.tsx b/src/components/forms/file-dropper/file-dropper.tsx
index 9cd66a793..3ff03e118 100644
--- a/src/components/forms/file-dropper/file-dropper.tsx
+++ b/src/components/forms/file-dropper/file-dropper.tsx
@@ -211,7 +211,10 @@ export const FileDropper = ({
         $hasErrors={Boolean(errors?.documents)}
       >
         <StyledLabel>
-          <input {...getInputProps({ ...register(name) })} />
+          <input
+            {...getInputProps({ ...register(name) })}
+            aria-invalid={Boolean(errors?.documents)}
+          />
         </StyledLabel>
         {!hasFiles && illustration && (
           <Illustration show={illustration} size={IllustrationSize.NORMAL} />
diff --git a/src/components/forms/text-area/text-area.tsx b/src/components/forms/text-area/text-area.tsx
index 181dc5f3a..7b9fecd54 100644
--- a/src/components/forms/text-area/text-area.tsx
+++ b/src/components/forms/text-area/text-area.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { TextStyles } from '../../typography';
 import { theme } from '../../layout/theme';
-import { useController, UseControllerProps } from 'react-hook-form';
+import {
+  FieldErrors,
+  useController,
+  UseControllerProps,
+} from 'react-hook-form';
 import { StyledErrorMessage, Label } from '../text-input/text-input';
 import { FormDataProps } from '../../pages/career-details/new-career-form/career-form';
 
@@ -32,6 +36,7 @@ export const TextArea = (
   props: UseControllerProps<FormDataProps> & {
     label: string;
     placeholder?: string;
+    errors?: FieldErrors;
   },
 ) => {
   const { field, fieldState, formState } = useController(props);
@@ -47,6 +52,7 @@ export const TextArea = (
       )}
       <StyledTextArea
         aria-required={true}
+        aria-invalid={Boolean(props.errors?.[props.name])}
         $hasError={Boolean(errorMessage)}
         disabled={formState.isSubmitting}
         {...field}
diff --git a/src/components/forms/text-input/text-input.tsx b/src/components/forms/text-input/text-input.tsx
index db7451bc7..adc6775fc 100644
--- a/src/components/forms/text-input/text-input.tsx
+++ b/src/components/forms/text-input/text-input.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { TextStyles } from '../../typography';
 import { theme } from '../../layout/theme';
-import { useController, UseControllerProps } from 'react-hook-form';
+import {
+  FieldErrors,
+  useController,
+  UseControllerProps,
+} from 'react-hook-form';
 import { FormDataProps } from '../../pages/career-details/new-career-form/career-form';
 
 const Input = styled.input<{ $hasError?: boolean }>`
@@ -50,6 +54,7 @@ export const TextInput = (
   props: UseControllerProps<FormDataProps> & {
     label: string;
     placeholder?: string;
+    errors?: FieldErrors;
   },
 ) => {
   const { field, fieldState, formState } = useController(props);
@@ -66,6 +71,7 @@ export const TextInput = (
       <Input
         type={'text'}
         aria-required={true}
+        aria-invalid={Boolean(props.errors?.[props.name])}
         $hasError={Boolean(errorMessage)}
         disabled={formState.isSubmitting}
         id={props.name}
diff --git a/src/components/pages/career-details/new-career-form/career-form-fields.tsx b/src/components/pages/career-details/new-career-form/career-form-fields.tsx
index 0a8a3f73c..e92647067 100644
--- a/src/components/pages/career-details/new-career-form/career-form-fields.tsx
+++ b/src/components/pages/career-details/new-career-form/career-form-fields.tsx
@@ -53,7 +53,7 @@ export const CareerDetailsFileText = () => {
   );
 };
 
-export const CareerDetailsCheckbox = ({ control }) => {
+export const CareerDetailsCheckbox = ({ control, errors }) => {
   const { t } = useTranslation();
 
   return (
@@ -70,6 +70,7 @@ export const CareerDetailsCheckbox = ({ control }) => {
       }
       control={control}
       rules={{ required: t('career.error.approval') }}
+      errors={errors}
     />
   );
 };
diff --git a/src/components/pages/career-details/new-career-form/career-form.tsx b/src/components/pages/career-details/new-career-form/career-form.tsx
index 8cc7d9b12..9a41cd7d9 100644
--- a/src/components/pages/career-details/new-career-form/career-form.tsx
+++ b/src/components/pages/career-details/new-career-form/career-form.tsx
@@ -120,12 +120,14 @@ export const Form = (props: CareerFormProps) => {
             label={t('career.first-name')}
             control={control}
             rules={{ required: t('career.error.first-name') }}
+            errors={errors}
           />
           <TextInput
             name="last_name"
             label={t('career.last-name')}
             control={control}
             rules={{ required: t('career.error.last-name') }}
+            errors={errors}
           />
 
           <TextInput
@@ -139,21 +141,25 @@ export const Form = (props: CareerFormProps) => {
                 message: t('career.error.email-undefined'),
               },
             }}
+            errors={errors}
           />
           <TextInput
             name="location"
             label={t('career.location')}
             control={control}
+            errors={errors}
           />
           <TextInput
             name="available_from"
             label={t('career.available-from')}
             control={control}
+            errors={errors}
           />
           <TextInput
             name="salary_expectations"
             label={t('career.salary-expectations')}
             control={control}
+            errors={errors}
           />
         </FormLayout>
         <TextArea
@@ -167,6 +173,7 @@ export const Form = (props: CareerFormProps) => {
               message: t('career.error.cover-letter-length'),
             },
           }}
+          errors={errors}
         />
 
         <br />
@@ -179,7 +186,7 @@ export const Form = (props: CareerFormProps) => {
         />
         <CareerDetailsFileText />
         <br />
-        <CareerDetailsCheckbox control={control} />
+        <CareerDetailsCheckbox control={control} errors={errors} />
         <br />
         <CareerDetailsSubmitButton
           errors={errors}

From a2c4b147044cd9b9c76f76a5e329e3a7f4fe89b7 Mon Sep 17 00:00:00 2001
From: "noa.santo" <noa.santo@satellytes.com>
Date: Wed, 18 Sep 2024 16:44:53 +0200
Subject: [PATCH 2/6] chore: simply aria-invalid checks

---
 src/components/forms/checkbox/checkbox.tsx               | 4 +---
 src/components/forms/text-area/text-area.tsx             | 9 ++-------
 src/components/forms/text-input/text-input.tsx           | 9 ++-------
 .../new-career-form/career-form-fields.tsx               | 3 +--
 .../pages/career-details/new-career-form/career-form.tsx | 9 +--------
 5 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/src/components/forms/checkbox/checkbox.tsx b/src/components/forms/checkbox/checkbox.tsx
index b2702b39c..fef476f8f 100644
--- a/src/components/forms/checkbox/checkbox.tsx
+++ b/src/components/forms/checkbox/checkbox.tsx
@@ -6,7 +6,6 @@ import { TextStyles } from '../../typography';
 import { Icon } from '../../ui/icon/icon';
 import { StyledErrorMessage } from '../text-input/text-input';
 import { up } from '../../support/breakpoint';
-import { FormErrors } from '../../pages/career-details/new-career-form/career-form';
 
 const CheckboxLabel = styled.label`
   display: inline-flex;
@@ -69,7 +68,6 @@ const CheckboxLabelTextWrapper = ({ label, required }) => {
 export const Checkbox = (
   props: UseControllerProps<any> & {
     label: string | JSX.Element;
-    errors: FormErrors;
   },
 ) => {
   const { field, fieldState, formState } = useController(props);
@@ -93,7 +91,7 @@ export const Checkbox = (
           {...props}
           id={props.name}
           onChange={handleChange}
-          aria-invalid={Boolean(props.errors?.[props.name])}
+          aria-invalid={Boolean(errorMessage)}
         />
         <StyledCheckbox checked={checked} hasError={Boolean(fieldState?.error)}>
           <Icon show="checkmark_bold" />
diff --git a/src/components/forms/text-area/text-area.tsx b/src/components/forms/text-area/text-area.tsx
index 7b9fecd54..b0d264296 100644
--- a/src/components/forms/text-area/text-area.tsx
+++ b/src/components/forms/text-area/text-area.tsx
@@ -2,11 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { TextStyles } from '../../typography';
 import { theme } from '../../layout/theme';
-import {
-  FieldErrors,
-  useController,
-  UseControllerProps,
-} from 'react-hook-form';
+import { useController, UseControllerProps } from 'react-hook-form';
 import { StyledErrorMessage, Label } from '../text-input/text-input';
 import { FormDataProps } from '../../pages/career-details/new-career-form/career-form';
 
@@ -36,7 +32,6 @@ export const TextArea = (
   props: UseControllerProps<FormDataProps> & {
     label: string;
     placeholder?: string;
-    errors?: FieldErrors;
   },
 ) => {
   const { field, fieldState, formState } = useController(props);
@@ -52,7 +47,7 @@ export const TextArea = (
       )}
       <StyledTextArea
         aria-required={true}
-        aria-invalid={Boolean(props.errors?.[props.name])}
+        aria-invalid={Boolean(errorMessage)}
         $hasError={Boolean(errorMessage)}
         disabled={formState.isSubmitting}
         {...field}
diff --git a/src/components/forms/text-input/text-input.tsx b/src/components/forms/text-input/text-input.tsx
index adc6775fc..e2d7f85d1 100644
--- a/src/components/forms/text-input/text-input.tsx
+++ b/src/components/forms/text-input/text-input.tsx
@@ -2,11 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { TextStyles } from '../../typography';
 import { theme } from '../../layout/theme';
-import {
-  FieldErrors,
-  useController,
-  UseControllerProps,
-} from 'react-hook-form';
+import { useController, UseControllerProps } from 'react-hook-form';
 import { FormDataProps } from '../../pages/career-details/new-career-form/career-form';
 
 const Input = styled.input<{ $hasError?: boolean }>`
@@ -54,7 +50,6 @@ export const TextInput = (
   props: UseControllerProps<FormDataProps> & {
     label: string;
     placeholder?: string;
-    errors?: FieldErrors;
   },
 ) => {
   const { field, fieldState, formState } = useController(props);
@@ -71,7 +66,7 @@ export const TextInput = (
       <Input
         type={'text'}
         aria-required={true}
-        aria-invalid={Boolean(props.errors?.[props.name])}
+        aria-invalid={Boolean(errorMessage)}
         $hasError={Boolean(errorMessage)}
         disabled={formState.isSubmitting}
         id={props.name}
diff --git a/src/components/pages/career-details/new-career-form/career-form-fields.tsx b/src/components/pages/career-details/new-career-form/career-form-fields.tsx
index e92647067..0a8a3f73c 100644
--- a/src/components/pages/career-details/new-career-form/career-form-fields.tsx
+++ b/src/components/pages/career-details/new-career-form/career-form-fields.tsx
@@ -53,7 +53,7 @@ export const CareerDetailsFileText = () => {
   );
 };
 
-export const CareerDetailsCheckbox = ({ control, errors }) => {
+export const CareerDetailsCheckbox = ({ control }) => {
   const { t } = useTranslation();
 
   return (
@@ -70,7 +70,6 @@ export const CareerDetailsCheckbox = ({ control, errors }) => {
       }
       control={control}
       rules={{ required: t('career.error.approval') }}
-      errors={errors}
     />
   );
 };
diff --git a/src/components/pages/career-details/new-career-form/career-form.tsx b/src/components/pages/career-details/new-career-form/career-form.tsx
index 9a41cd7d9..8cc7d9b12 100644
--- a/src/components/pages/career-details/new-career-form/career-form.tsx
+++ b/src/components/pages/career-details/new-career-form/career-form.tsx
@@ -120,14 +120,12 @@ export const Form = (props: CareerFormProps) => {
             label={t('career.first-name')}
             control={control}
             rules={{ required: t('career.error.first-name') }}
-            errors={errors}
           />
           <TextInput
             name="last_name"
             label={t('career.last-name')}
             control={control}
             rules={{ required: t('career.error.last-name') }}
-            errors={errors}
           />
 
           <TextInput
@@ -141,25 +139,21 @@ export const Form = (props: CareerFormProps) => {
                 message: t('career.error.email-undefined'),
               },
             }}
-            errors={errors}
           />
           <TextInput
             name="location"
             label={t('career.location')}
             control={control}
-            errors={errors}
           />
           <TextInput
             name="available_from"
             label={t('career.available-from')}
             control={control}
-            errors={errors}
           />
           <TextInput
             name="salary_expectations"
             label={t('career.salary-expectations')}
             control={control}
-            errors={errors}
           />
         </FormLayout>
         <TextArea
@@ -173,7 +167,6 @@ export const Form = (props: CareerFormProps) => {
               message: t('career.error.cover-letter-length'),
             },
           }}
-          errors={errors}
         />
 
         <br />
@@ -186,7 +179,7 @@ export const Form = (props: CareerFormProps) => {
         />
         <CareerDetailsFileText />
         <br />
-        <CareerDetailsCheckbox control={control} errors={errors} />
+        <CareerDetailsCheckbox control={control} />
         <br />
         <CareerDetailsSubmitButton
           errors={errors}

From f861e25d18e8a8a412b071e8210742d5bcba2688 Mon Sep 17 00:00:00 2001
From: "noa.santo" <noa.santo@satellytes.com>
Date: Wed, 18 Sep 2024 16:54:45 +0200
Subject: [PATCH 3/6] fix (a11y): add aria-descirbedby to all input elements
 fix (a11y): add aria-labeledby to checkbox

---
 src/components/forms/checkbox/checkbox.tsx        | 15 +++++++++++----
 .../forms/file-dropper/file-dropper.tsx           |  3 ++-
 src/components/forms/text-area/text-area.tsx      |  7 ++++++-
 src/components/forms/text-input/text-input.tsx    |  7 ++++++-
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/forms/checkbox/checkbox.tsx b/src/components/forms/checkbox/checkbox.tsx
index fef476f8f..0a911d5f8 100644
--- a/src/components/forms/checkbox/checkbox.tsx
+++ b/src/components/forms/checkbox/checkbox.tsx
@@ -57,9 +57,9 @@ const HiddenCheckbox = styled.input.attrs({
   visibility: hidden;
 `;
 
-const CheckboxLabelTextWrapper = ({ label, required }) => {
+const CheckboxLabelTextWrapper = ({ label, required, id }) => {
   return (
-    <CheckboxLabelText>
+    <CheckboxLabelText id={id}>
       {label} {required && <span aria-hidden={true}>*</span>}
     </CheckboxLabelText>
   );
@@ -85,25 +85,32 @@ export const Checkbox = (
       <CheckboxLabel>
         <HiddenCheckbox
           aria-required={true}
+          aria-describedby={errorMessage && `${props.name}-error`}
+          aria-labelledby={`${props.name}-label`}
+          aria-invalid={Boolean(errorMessage)}
           disabled={formState.isSubmitting}
           {...field}
           value={field?.value || false}
           {...props}
           id={props.name}
           onChange={handleChange}
-          aria-invalid={Boolean(errorMessage)}
         />
         <StyledCheckbox checked={checked} hasError={Boolean(fieldState?.error)}>
           <Icon show="checkmark_bold" />
         </StyledCheckbox>
         {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
index 3ff03e118..7acc443e8 100644
--- a/src/components/forms/file-dropper/file-dropper.tsx
+++ b/src/components/forms/file-dropper/file-dropper.tsx
@@ -214,6 +214,7 @@ export const FileDropper = ({
           <input
             {...getInputProps({ ...register(name) })}
             aria-invalid={Boolean(errors?.documents)}
+            aria-describedby={errors?.documents && `${name}-error`}
           />
         </StyledLabel>
         {!hasFiles && illustration && (
@@ -238,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
index b0d264296..95a52b529 100644
--- a/src/components/forms/text-area/text-area.tsx
+++ b/src/components/forms/text-area/text-area.tsx
@@ -47,6 +47,7 @@ export const TextArea = (
       )}
       <StyledTextArea
         aria-required={true}
+        aria-describedby={errorMessage && `${props.name}-error`}
         aria-invalid={Boolean(errorMessage)}
         $hasError={Boolean(errorMessage)}
         disabled={formState.isSubmitting}
@@ -57,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
index e2d7f85d1..6dd8cd95e 100644
--- a/src/components/forms/text-input/text-input.tsx
+++ b/src/components/forms/text-input/text-input.tsx
@@ -66,6 +66,7 @@ export const TextInput = (
       <Input
         type={'text'}
         aria-required={true}
+        aria-describedby={errorMessage && `${props.name}-error`}
         aria-invalid={Boolean(errorMessage)}
         $hasError={Boolean(errorMessage)}
         disabled={formState.isSubmitting}
@@ -74,7 +75,11 @@ export const TextInput = (
         {...field}
         value={(field?.value as string) || ''}
       />
-      {errorMessage && <StyledErrorMessage>{errorMessage}</StyledErrorMessage>}
+      {errorMessage && (
+        <StyledErrorMessage id={`${props.name}-error`}>
+          {errorMessage}
+        </StyledErrorMessage>
+      )}
     </div>
   );
 };

From 6d9e5b6eab79d1ea97d8e5cd0307d1b815667f0e Mon Sep 17 00:00:00 2001
From: "noa.santo" <noa.santo@satellytes.com>
Date: Wed, 18 Sep 2024 17:00:10 +0200
Subject: [PATCH 4/6] fix: only add aria-labelledby to checkbox it there is a
 label

---
 src/components/forms/checkbox/checkbox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/forms/checkbox/checkbox.tsx b/src/components/forms/checkbox/checkbox.tsx
index 0a911d5f8..ea4f3a697 100644
--- a/src/components/forms/checkbox/checkbox.tsx
+++ b/src/components/forms/checkbox/checkbox.tsx
@@ -86,7 +86,7 @@ export const Checkbox = (
         <HiddenCheckbox
           aria-required={true}
           aria-describedby={errorMessage && `${props.name}-error`}
-          aria-labelledby={`${props.name}-label`}
+          aria-labelledby={props.label && `${props.name}-label`}
           aria-invalid={Boolean(errorMessage)}
           disabled={formState.isSubmitting}
           {...field}

From 453e55d42aa0863e3a2d2314d6dd3ccacf48efdc Mon Sep 17 00:00:00 2001
From: "noa.santo" <noa.santo@satellytes.com>
Date: Thu, 19 Sep 2024 16:07:57 +0200
Subject: [PATCH 5/6] fix (a11y): set aria-required to the correct value

---
 src/components/forms/checkbox/checkbox.tsx     | 2 +-
 src/components/forms/text-area/text-area.tsx   | 2 +-
 src/components/forms/text-input/text-input.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/checkbox/checkbox.tsx b/src/components/forms/checkbox/checkbox.tsx
index ea4f3a697..7efc8a0ee 100644
--- a/src/components/forms/checkbox/checkbox.tsx
+++ b/src/components/forms/checkbox/checkbox.tsx
@@ -84,7 +84,7 @@ export const Checkbox = (
     <div>
       <CheckboxLabel>
         <HiddenCheckbox
-          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)}
diff --git a/src/components/forms/text-area/text-area.tsx b/src/components/forms/text-area/text-area.tsx
index 95a52b529..5787d6b2c 100644
--- a/src/components/forms/text-area/text-area.tsx
+++ b/src/components/forms/text-area/text-area.tsx
@@ -46,7 +46,7 @@ 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)}
diff --git a/src/components/forms/text-input/text-input.tsx b/src/components/forms/text-input/text-input.tsx
index 6dd8cd95e..0bccec83e 100644
--- a/src/components/forms/text-input/text-input.tsx
+++ b/src/components/forms/text-input/text-input.tsx
@@ -65,7 +65,7 @@ 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)}

From 41ebe00f1ef42971decd517369e4ad8638048a3f Mon Sep 17 00:00:00 2001
From: "noa.santo" <noa.santo@satellytes.com>
Date: Thu, 19 Sep 2024 16:21:52 +0200
Subject: [PATCH 6/6] fix (a11y): aria-hide checkmark svg

---
 src/components/forms/checkbox/checkbox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/forms/checkbox/checkbox.tsx b/src/components/forms/checkbox/checkbox.tsx
index 3694f9b3e..62645d417 100644
--- a/src/components/forms/checkbox/checkbox.tsx
+++ b/src/components/forms/checkbox/checkbox.tsx
@@ -49,7 +49,7 @@ const StyledCheckbox = styled.input.attrs({
   }
 `;
 
-const StyledIcon = styled(Icon)`
+const StyledIcon = styled(Icon).attrs({ ariaHidden: true })`
   position: absolute;
   pointer-events: none;
 `;