diff --git a/packages/main/cypress/specs/CheckBox.cy.tsx b/packages/main/cypress/specs/CheckBox.cy.tsx index 4500cfbfb372..701075f36e2a 100644 --- a/packages/main/cypress/specs/CheckBox.cy.tsx +++ b/packages/main/cypress/specs/CheckBox.cy.tsx @@ -367,4 +367,24 @@ describe("CheckBox general interaction", () => { .find("ui5-icon") .should("have.attr", "name", "tri-state"); }); +}); + +describe("Accessibility", () => { + it("should announce the associated label when CheckBox is focused", () => { + cy.mount( + <> + + + + ); + + cy.get('label[for="cb"]') + .invoke('text') + .then((labelText) => { + cy.get("[ui5-checkbox]") + .shadow() + .find(".ui5-checkbox-root") + .should("have.attr", "aria-label", labelText); + }); + }); }); \ No newline at end of file diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts index 8adafcb90f87..cca68ae71efc 100644 --- a/packages/main/src/CheckBox.ts +++ b/packages/main/src/CheckBox.ts @@ -7,7 +7,7 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; -import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; +import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js"; import type WrappingType from "./types/WrappingType.js"; @@ -400,7 +400,7 @@ class CheckBox extends UI5Element implements IFormInputElement { } get ariaLabelText() { - return getEffectiveAriaLabelText(this); + return getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this); } get classes() {