diff --git a/packages/main/cypress/specs/CheckBox.cy.tsx b/packages/main/cypress/specs/CheckBox.cy.tsx index 8f19a3a7fbb9..c8db82a08613 100644 --- a/packages/main/cypress/specs/CheckBox.cy.tsx +++ b/packages/main/cypress/specs/CheckBox.cy.tsx @@ -406,12 +406,14 @@ 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("Accessibility Test Not checked"); + expect(accInfo.label).to.equal("Custom Aria Label"); 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,26 +434,8 @@ describe("Accessibility", () => { const accInfo = checkbox.accessibilityInfo; // Description should come from associated label - expect(accInfo.description).to.equal("Label For Accessibility Test"); - }); - }); - - 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"); + expect(accInfo.description).to.equal("Not checked"); + expect(accInfo.label).to.equal("Label For Accessibility Test"); }); }); @@ -470,7 +454,8 @@ 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("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 3d6809acf1a3..0938c24e047a 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,14 @@ 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.text || "", checkboxState].filter(Boolean).join(" "); + return { role: this.accInfo.role, - description: this.ariaLabelText || this.text || "", + type: CheckBox.i18nBundle.getText(CHECKBOX_ARIA_TYPE), + description, + label: this.ariaLabelText, 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 45f36ff46874..65edea24ede3 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -919,6 +919,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