From 8edc40e71852215372804dd03913cb1f624e2b44 Mon Sep 17 00:00:00 2001 From: Iliana Bobeva Date: Tue, 18 Nov 2025 13:52:00 +0200 Subject: [PATCH 1/3] fix(ui5-checkbox): fix accessibilityInfo --- packages/main/cypress/specs/CheckBox.cy.tsx | 14 ++++++++------ packages/main/src/CheckBox.ts | 9 ++++++++- packages/main/src/i18n/messagebundle.properties | 9 +++++++++ 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/packages/main/cypress/specs/CheckBox.cy.tsx b/packages/main/cypress/specs/CheckBox.cy.tsx index 8f19a3a7fbb9..329952e56e3f 100644 --- a/packages/main/cypress/specs/CheckBox.cy.tsx +++ b/packages/main/cypress/specs/CheckBox.cy.tsx @@ -406,12 +406,13 @@ describe("Accessibility", () => { const accInfo = checkbox.accessibilityInfo; // Description should come from accessibleName property - expect(accInfo.description).to.equal("Custom Aria Label"); + expect(accInfo.description).to.equal("Custom Aria Label Not checked"); expect(accInfo.readonly).to.be.true; expect(accInfo.required).to.be.true; expect(accInfo.disabled).to.be.false; - + + expect(accInfo.type).to.equal("Checkbox"); expect(accInfo.role).to.equal("checkbox"); }); }); @@ -432,7 +433,7 @@ describe("Accessibility", () => { const accInfo = checkbox.accessibilityInfo; // Description should come from associated label - expect(accInfo.description).to.equal("Label For Accessibility Test"); + expect(accInfo.description).to.equal("Label For Accessibility Test Not checked"); }); }); @@ -441,7 +442,8 @@ describe("Accessibility", () => { <> ); @@ -451,7 +453,7 @@ describe("Accessibility", () => { const accInfo = checkbox.accessibilityInfo; // Description should come from text property - expect(accInfo.description).to.equal("Accessibility Test Text"); + expect(accInfo.description).to.equal("Accessibility Test Text Checked"); }); }); @@ -470,7 +472,7 @@ describe("Accessibility", () => { const accInfo = checkbox.accessibilityInfo; // Description should come from associated label - expect(accInfo.description).to.equal("Label For Accessibility Test"); + expect(accInfo.description).to.equal("Label For Accessibility Test Not checked"); }); }); }); diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts index 3d6809acf1a3..5a0f2afd65aa 100644 --- a/packages/main/src/CheckBox.ts +++ b/packages/main/src/CheckBox.ts @@ -22,6 +22,9 @@ import { VALUE_STATE_WARNING, VALUE_STATE_SUCCESS, FORM_CHECKABLE_REQUIRED, + CHECKBOX_CHECKED, + CHECKBOX_NOT_CHECKED, + CHECKBOX_ARIA_TYPE, } from "./generated/i18n/i18n-defaults.js"; // Styles @@ -466,9 +469,13 @@ class CheckBox extends UI5Element implements IFormInputElement { } get accessibilityInfo() { + const checkboxState = this.checked ? CheckBox.i18nBundle.getText(CHECKBOX_CHECKED) : CheckBox.i18nBundle.getText(CHECKBOX_NOT_CHECKED); + const description = (this.ariaLabelText || this.text || "") + " " + checkboxState; + return { role: this.accInfo.role, - description: this.ariaLabelText || this.text || "", + type: CheckBox.i18nBundle.getText(CHECKBOX_ARIA_TYPE), + description, disabled: !!this.accInfo.ariaDisabled, readonly: !!this.accInfo.ariaReadonly, required: this.accInfo.ariaRequired, diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index f5779d84beb6..f9e16e7770c0 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -904,6 +904,15 @@ DYNAMIC_DATE_RANGE_LAST_YEARS_TEXT=Last X Years #XFLD: Text for the "Next Years" option in the DynamicDateRange component. DYNAMIC_DATE_RANGE_NEXT_YEARS_TEXT=Next X Years +#XACT: Text for checkbox state - checked +CHECKBOX_CHECKED=Checked + +#XACT: Text for checkbox state - not checked +CHECKBOX_NOT_CHECKED=Not checked + +#XACT: ARIA type for checkbox +CHECKBOX_ARIA_TYPE=Checkbox + #XFLD: Label for the value input field in the DynamicDateRange component. DYNAMIC_DATE_RANGE_VALUE_LABEL_TEXT=Value for X From daabcf7a17e57894b7d2cf05b8e705a3c06a43af Mon Sep 17 00:00:00 2001 From: Iliana Bobeva Date: Tue, 18 Nov 2025 17:01:37 +0200 Subject: [PATCH 2/3] chore: fix lint errors --- packages/main/src/CheckBox.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts index 5a0f2afd65aa..5ff79c4fba98 100644 --- a/packages/main/src/CheckBox.ts +++ b/packages/main/src/CheckBox.ts @@ -470,8 +470,8 @@ class CheckBox extends UI5Element implements IFormInputElement { get accessibilityInfo() { const checkboxState = this.checked ? CheckBox.i18nBundle.getText(CHECKBOX_CHECKED) : CheckBox.i18nBundle.getText(CHECKBOX_NOT_CHECKED); - const description = (this.ariaLabelText || this.text || "") + " " + checkboxState; - + const description = `${this.ariaLabelText || this.text || ""} ${checkboxState}`; + return { role: this.accInfo.role, type: CheckBox.i18nBundle.getText(CHECKBOX_ARIA_TYPE), From 2d339f7ce916068e7bccab45c5c6f0ca17fa577c Mon Sep 17 00:00:00 2001 From: Iliana Bobeva Date: Mon, 1 Dec 2025 16:49:07 +0200 Subject: [PATCH 3/3] chore: remove custom label from description, instead - return it as label --- packages/main/cypress/specs/CheckBox.cy.tsx | 29 +++++---------------- packages/main/src/CheckBox.ts | 3 ++- 2 files changed, 8 insertions(+), 24 deletions(-) diff --git a/packages/main/cypress/specs/CheckBox.cy.tsx b/packages/main/cypress/specs/CheckBox.cy.tsx index 329952e56e3f..c8db82a08613 100644 --- a/packages/main/cypress/specs/CheckBox.cy.tsx +++ b/packages/main/cypress/specs/CheckBox.cy.tsx @@ -406,7 +406,8 @@ describe("Accessibility", () => { const accInfo = checkbox.accessibilityInfo; // Description should come from accessibleName property - expect(accInfo.description).to.equal("Custom Aria Label Not checked"); + expect(accInfo.description).to.equal("Accessibility Test Not checked"); + expect(accInfo.label).to.equal("Custom Aria Label"); expect(accInfo.readonly).to.be.true; expect(accInfo.required).to.be.true; @@ -433,27 +434,8 @@ describe("Accessibility", () => { const accInfo = checkbox.accessibilityInfo; // Description should come from associated label - expect(accInfo.description).to.equal("Label For Accessibility Test Not checked"); - }); - }); - - it("should provide correct accessibilityInfo description from text", () => { - cy.mount( - <> - - - ); - - cy.get("#accessibilityTestCb2").then($checkbox => { - const checkbox = $checkbox[0] as CheckBox; - const accInfo = checkbox.accessibilityInfo; - - // Description should come from text property - expect(accInfo.description).to.equal("Accessibility Test Text Checked"); + expect(accInfo.description).to.equal("Not checked"); + expect(accInfo.label).to.equal("Label For Accessibility Test"); }); }); @@ -472,7 +454,8 @@ describe("Accessibility", () => { const accInfo = checkbox.accessibilityInfo; // Description should come from associated label - expect(accInfo.description).to.equal("Label For Accessibility Test Not checked"); + expect(accInfo.description).to.equal("Not checked"); + expect(accInfo.label).to.equal("Label For Accessibility Test"); }); }); }); diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts index 5ff79c4fba98..0938c24e047a 100644 --- a/packages/main/src/CheckBox.ts +++ b/packages/main/src/CheckBox.ts @@ -470,12 +470,13 @@ class CheckBox extends UI5Element implements IFormInputElement { get accessibilityInfo() { const checkboxState = this.checked ? CheckBox.i18nBundle.getText(CHECKBOX_CHECKED) : CheckBox.i18nBundle.getText(CHECKBOX_NOT_CHECKED); - const description = `${this.ariaLabelText || this.text || ""} ${checkboxState}`; + const description = [this.text || "", checkboxState].filter(Boolean).join(" "); return { role: this.accInfo.role, type: CheckBox.i18nBundle.getText(CHECKBOX_ARIA_TYPE), description, + label: this.ariaLabelText, disabled: !!this.accInfo.ariaDisabled, readonly: !!this.accInfo.ariaReadonly, required: this.accInfo.ariaRequired,