Merge pull request #2136 from dxc-technology/jialecl-checkbox-ariaLabel

ariaLabel prop added to checkbox

Author: GomezIvann

apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx

@@ -164,6 +164,16 @@ const sections = [
             <td>Reference to the component.</td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>ariaLabel</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>
+              Specifies a string to be used as the name for the checkbox element when no <Code>label</Code> is provided.
+            </td>
+            <td>'Checkbox'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),

packages/lib/src/checkbox/Checkbox.test.tsx

@@ -10,6 +10,12 @@ describe("Checkbox component tests", () => {
     expect(getByRole("checkbox").getAttribute("aria-required")).toBe("true");
     expect(getByRole("checkbox").getAttribute("aria-readonly")).toBe("false");
     expect(getByRole("checkbox").getAttribute("aria-disabled")).toBe("false");
+    expect(getByRole("checkbox").getAttribute("aria-label")).toBeNull();
+  });
+  test("Renders with correct aria-label", () => {
+    const { getByRole } = render(<DxcCheckbox ariaLabel="Example aria label" />);
+    const checkbox = getByRole("checkbox");
+    expect(checkbox.getAttribute("aria-label")).toBe("Example aria label");
   });
   test("Optional checkbox renders with correct aria-required", () => {
     const { getByRole } = render(<DxcCheckbox label="Checkbox" optional />);

packages/lib/src/checkbox/Checkbox.tsx

@@ -27,6 +27,7 @@ const DxcCheckbox = forwardRef<RefType, CheckboxPropsType>(
       margin,
       size = "fitContent",
       tabIndex = 0,
+      ariaLabel = "Checkbox",
     },
     ref
   ): JSX.Element => {
@@ -94,7 +95,7 @@ const DxcCheckbox = forwardRef<RefType, CheckboxPropsType>(
               aria-readonly={readOnly}
               aria-required={!disabled && !optional}
               aria-labelledby={label ? labelId : undefined}
-              aria-label={label ? undefined : "Checkbox"}
+              aria-label={label ? undefined : ariaLabel}
               checked={checked ?? innerChecked}
               disabled={disabled}
               readOnly={readOnly}

packages/lib/src/checkbox/types.ts

@@ -59,6 +59,10 @@ type Props = {
    * Value of the tabindex.
    */
   tabIndex?: number;
+  /**
+   * Specifies a string to be used as the name for the checkbox element when no `label` is provided.
+   */
+  ariaLabel?: string;
 };
 
 /**