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;
};
/**