Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 87 additions & 1 deletion packages/main/cypress/specs/CheckBox.cy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -387,4 +387,90 @@ 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;

// 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");
});
});

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");
});
});
});
10 changes: 10 additions & 0 deletions packages/main/src/CheckBox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -465,6 +465,16 @@ class CheckBox extends UI5Element implements IFormInputElement {
return this.displayOnly && !this.disabled;
}

get accessibilityInfo() {
return {
role: this.accInfo.role,
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,
Expand Down
Loading