Include new aria-label and aria-labelledby props to checkbox component

Author: Hector Arce De Las Heras

src/components/checkbox/checkboxStandAlone.tsx

@@ -44,6 +44,7 @@ const CheckboxStandAloneComponent = (
     helperText,
     extraAriaDescribedBy = '',
     screenReaderText,
+    ...props
   }: ICheckboxStandAlone,
   ref: React.ForwardedRef<HTMLInputElement> | undefined | null
 ): JSX.Element => {
@@ -139,6 +140,8 @@ const CheckboxStandAloneComponent = (
               screenReaderId,
             })}
             aria-invalid={hasError}
+            aria-label={props['aria-label']}
+            aria-labelledby={props['aria-labelledby']}
             checked={isChecked}
             data-testid={`${dataTestId}Input`}
             disabled={isDisabled}

src/components/checkbox/types/checkbox.ts

@@ -34,11 +34,13 @@ export interface ICheckboxErrorStandAlone {
   errorMessage?: CheckboxHelperAndErrorTextType;
 }
 
+type CheckboxAriaAttributes = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby'>;
+
 /**
  * @description
  * interface for the checkbox standAlone
  */
-export interface ICheckboxStandAlone extends IInputComponent {
+export interface ICheckboxStandAlone extends IInputComponent, CheckboxAriaAttributes {
   dataTestId?: string;
   state: CheckboxStateType;
   styles?: CheckboxPropsStylesType;

src/components/checkboxWithLabel/checkboxWithLabelStandAlone.tsx

@@ -51,6 +51,8 @@ const CheckboxWithLabelStandAloneComponent = <V extends string | unknown>(
         styles={styles}
       >
         <CheckboxControlled
+          aria-label={props['aria-label']}
+          aria-labelledby={props['aria-labelledby']}
           checked={checked}
           checkedIcon={checkedIcon}
           dataTestId={dataTestId}