diff --git a/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx b/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx index 23ec3c4b1a..1aa21a0573 100644 --- a/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx +++ b/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx @@ -164,6 +164,16 @@ const sections = [ Reference to the component. - + + ariaLabel + + string + + + Specifies a string to be used as the name for the checkbox element when no label is provided. + + 'Checkbox' + ), diff --git a/packages/lib/src/checkbox/Checkbox.test.tsx b/packages/lib/src/checkbox/Checkbox.test.tsx index a6979ea019..a240718022 100644 --- a/packages/lib/src/checkbox/Checkbox.test.tsx +++ b/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(); + const checkbox = getByRole("checkbox"); + expect(checkbox.getAttribute("aria-label")).toBe("Example aria label"); }); test("Optional checkbox renders with correct aria-required", () => { const { getByRole } = render(); diff --git a/packages/lib/src/checkbox/Checkbox.tsx b/packages/lib/src/checkbox/Checkbox.tsx index d7c22a8b73..a7c6a730a5 100644 --- a/packages/lib/src/checkbox/Checkbox.tsx +++ b/packages/lib/src/checkbox/Checkbox.tsx @@ -27,6 +27,7 @@ const DxcCheckbox = forwardRef( margin, size = "fitContent", tabIndex = 0, + ariaLabel = "Checkbox", }, ref ): JSX.Element => { @@ -94,7 +95,7 @@ const DxcCheckbox = forwardRef( 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} diff --git a/packages/lib/src/checkbox/types.ts b/packages/lib/src/checkbox/types.ts index 34a0f13fff..1559591832 100644 --- a/packages/lib/src/checkbox/types.ts +++ b/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; }; /**