Enhance Accessibility for Checkbox Component

This commit improves the accessibility of the Checkbox component. The aria-describedby attribute of the checkbox now includes the id of the checkbox label, providing more context for screen readers.

Changes include:

Updated test in checkbox.test.tsx to verify that the aria-describedby attribute includes the checkbox label id.
In checkboxStandAlone.tsx, added a new id for the checkbox label and included this id in the aria-describedby attribute.
Updated buildAriaDescribedBy function in aria.utils.ts to include the checkbox label id in the aria-describedby attribute when a label is provided.
These changes help screen readers provide more context to users about the checkbox, improving overall accessibility.

Author: Hector Arce De Las Heras

src/components/checkbox/__tests__/checkbox.test.tsx

@@ -247,7 +247,10 @@ describe('Checkbox component', () => {
     const checkbox = screen.getByRole('checkbox');
 
     expect(checkbox).toBeInTheDocument();
-    expect(checkbox).toHaveAttribute('aria-describedby', `${checkboxId}ScreenReader`);
+    expect(checkbox).toHaveAttribute(
+      'aria-describedby',
+      `${checkboxId}Label ${checkboxId}ScreenReader`
+    );
 
     const results = await axe(container);
     expect(container).toHTMLValidate();

src/components/checkbox/checkboxStandAlone.tsx

@@ -51,6 +51,7 @@ const CheckboxStandAloneComponent = (
   const { isChecked, isDisabled, hasError } = checkboxState(state);
 
   const checkBoxId = id ?? uniqueId;
+  const checkBoxLabelId = `${checkBoxId}Label`;
   const checkBoxkHelpContentId = `${checkBoxId}HelpContent`;
   const checkBoxErrorId = `${checkBoxId}Error`;
   const screenReaderId = `${checkBoxId}ScreenReader`;
@@ -68,6 +69,7 @@ const CheckboxStandAloneComponent = (
             color={labelTypography?.color}
             cursor={isDisabled ? CURSOR_DEFAULT : CURSOR_POINTER}
             dataTestId={`${dataTestId}Label`}
+            id={checkBoxLabelId}
             inputId={checkBoxId}
             required={required}
             textVariant={labelTypography?.font_variant}
@@ -126,6 +128,8 @@ const CheckboxStandAloneComponent = (
             ref={ref}
             aria-describedby={buildAriaDescribedBy({
               extraAriaDescribedBy,
+              label: label?.content,
+              checkBoxLabelId,
               helpContent: helperContent?.content,
               checkBoxkHelpContentId,
               hasError,

src/components/checkbox/utils/aria.utils.ts

@@ -1,6 +1,8 @@
 /**
  * Build the aria-describedby attribute for the checkbox
  * @param extraAriaDescribedBy
+ * @param label
+ * @param checkBoxLabelId
  * @param helpContent
  * @param checkBoxkHelpContentId
  * @param textError
@@ -12,6 +14,8 @@
  */
 export const buildAriaDescribedBy = ({
   extraAriaDescribedBy,
+  label,
+  checkBoxLabelId,
   helpContent,
   checkBoxkHelpContentId,
   errorText,
@@ -21,6 +25,8 @@ export const buildAriaDescribedBy = ({
   screenReaderId,
 }: {
   extraAriaDescribedBy: string;
+  label?: JSX.Element | string;
+  checkBoxLabelId: string;
   helpContent?: JSX.Element | string;
   checkBoxkHelpContentId: string;
   hasError: boolean;
@@ -30,6 +36,9 @@ export const buildAriaDescribedBy = ({
   screenReaderId: string;
 }): string => {
   let res = extraAriaDescribedBy;
+  if (label) {
+    res += ` ${checkBoxLabelId}`;
+  }
   if (screenReaderText) {
     res += ` ${screenReaderId}`;
   }