feat(ui5-checkbox): implement accessibilityInfo getter

Author: IlianaB

packages/main/cypress/specs/CheckBox.cy.tsx

@@ -387,4 +387,93 @@ describe("Accessibility", () => {
 					.should("have.attr", "aria-label", labelText);
 			});
 	});
-});
+
+	it("should provide correct accessibilityInfo properties", () => {
+		cy.mount(
+			<>
+				<CheckBox 
+					id="accessibilityTestCb" 
+					text="Accessibility Test" 
+					required 
+					readonly 
+					accessibleName="Custom Aria Label"
+				></CheckBox>
+			</>
+		);
+
+		cy.get("#accessibilityTestCb").then($checkbox => {
+			const checkbox = $checkbox[0] as CheckBox;
+			const accInfo = checkbox.accessibilityInfo;
+			
+			expect(accInfo.type).to.equal("checkbox");
+			
+            // Description should come from accessibleName property
+			expect(accInfo.description).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.role).to.equal("checkbox");
+		});    
+	});
+
+    // should provide correct accessibilityInfo description from associated label wits accessibleNameRef
+    it("should provide correct accessibilityInfo description from accessibleNameRef", () => {
+        cy.mount(
+            <>
+                <label id="cb-label">Label For Accessibility Test</label>
+                <CheckBox 
+                    id="accessibilityTestCb1" 
+                    accessibleNameRef="cb-label"
+                ></CheckBox>
+            </>
+        );
+
+        cy.get("#accessibilityTestCb1").then($checkbox => {
+            const checkbox = $checkbox[0] as CheckBox;
+            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(
+            <>
+                <CheckBox 
+                    id="accessibilityTestCb2" 
+                    text="Accessibility Test Text" 
+                ></CheckBox>
+            </>
+        );
+
+        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");
+        });    
+    });
+
+    it("should provide correct accessibilityInfo description from associated label", () => {
+        cy.mount(
+            <>
+                <label for="accessibilityTestCb3">Label For Accessibility Test</label>
+                <CheckBox 
+                    id="accessibilityTestCb3" 
+                ></CheckBox>
+            </>
+        );
+
+        cy.get("#accessibilityTestCb3").then($checkbox => {
+            const checkbox = $checkbox[0] as CheckBox;
+            const accInfo = checkbox.accessibilityInfo;
+            
+            // Description should come from associated label
+            expect(accInfo.description).to.equal("Label For Accessibility Test");
+        });    
+    });
+});

packages/main/src/CheckBox.ts

@@ -22,6 +22,7 @@ import {
 	VALUE_STATE_WARNING,
 	VALUE_STATE_SUCCESS,
 	FORM_CHECKABLE_REQUIRED,
+	CHECKBOX_ARIA_TYPE,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -465,6 +466,17 @@ class CheckBox extends UI5Element implements IFormInputElement {
 		return this.displayOnly && !this.disabled;
 	}
 
+	get accessibilityInfo() {
+		return {
+			role: this.accInfo.role,
+			type: CheckBox.i18nBundle.getText(CHECKBOX_ARIA_TYPE),
+			description: this.ariaLabelText || this.text || "",
+			disabled: !!this.accInfo.ariaDisabled,
+			readonly: !!this.accInfo.ariaReadonly,
+			required: this.accInfo.ariaRequired,
+		};
+	}
+
 	get accInfo() {
 		return {
 			"role": this._accInfo ? this._accInfo.role : "checkbox" as AriaRole,

packages/main/src/i18n/messagebundle.properties

@@ -55,6 +55,9 @@ BREADCRUMB_ITEM_POS={0} of {1}
 #XACT: ARIA announcement for the breadcrumbs
 BREADCRUMBS_ARIA_LABEL=Breadcrumb Trail
 
+#XACT: ARIA announcement for the CheckBox component type
+CHECKBOX_ARIA_TYPE=checkbox
+
 #XACT: ARIA announcement for the breadcrumbs overflow button
 BREADCRUMBS_OVERFLOW_ARIA_LABEL=More