feat(ui5-switch): accessibility is enhanced for readonly state. (#13367)

When component is in readonly state an aria-describedBy attribute is added referencing a hidden html element, because the screen readers does not announce aria-readonly attribute.

Author: GDamyanov

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

@@ -191,6 +191,30 @@ describe("General accesibility attributes", () => {
 		cy.get("[ui5-switch]")
 			.ui5SwitchCheckAttributeInShadowDomRoot("aria-required", "false");
 	});
+
+	it("Should have 'aria-describedby' attribute when readonly", () => {
+		cy.mount(<Switch readonly></Switch>);
+
+		cy.get("[ui5-switch]")
+			.then($switch => {
+				const switchId = ($switch.get(0) as Switch)._id;
+				const expectedDescribedBy = `${switchId}-readonly-desc`;
+				
+				cy.wrap($switch)
+					.ui5SwitchCheckAttributeInShadowDomRoot("aria-describedby", expectedDescribedBy);
+			});
+	});
+
+	it("Should not have 'aria-describedby' attribute when not readonly", () => {
+		cy.mount(<Switch></Switch>);
+
+		cy.mount(<Switch></Switch>);
+
+		cy.get("[ui5-switch]")
+			.shadow()
+			.find(".ui5-switch-root")
+			.should("not.have.attr", "aria-describedby");
+	});
 });
 
 describe("General interactions in form", () => {

packages/main/src/Switch.ts

@@ -19,6 +19,7 @@ import {
 	FORM_CHECKABLE_REQUIRED,
 	SWITCH_ON,
 	SWITCH_OFF,
+	ACC_STATE_READONLY,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Template
@@ -364,6 +365,14 @@ class Switch extends UI5Element implements IFormInputElement {
 	get ariaLabelText() {
 		return getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this) || undefined;
 	}
+
+	get ariaDescribedBy() {
+		return this.readonly ? `${this._id}-readonly-desc` : undefined;
+	}
+
+	get ariaDescribedByText() {
+		return this.readonly ? Switch.i18nBundle.getText(ACC_STATE_READONLY) : "";
+	}
 }
 
 Switch.define();

packages/main/src/SwitchTemplate.tsx

@@ -22,6 +22,7 @@ export default function SwitchTemplate(this: Switch) {
 			aria-disabled={this.effectiveAriaDisabled}
 			aria-readonly={this.effectiveAriaReadonly}
 			aria-required={this.required}
+			aria-describedby={this.ariaDescribedBy}
 			onClick={this._onclick}
 			onKeyUp={this._onkeyup}
 			onKeyDown={this._onkeydown}
@@ -61,6 +62,8 @@ export default function SwitchTemplate(this: Switch) {
 							</>
 						}
 
+						{this.readonly && <span class="ui5-switch-text ui5-switch-text--readonly" id={this.ariaDescribedBy} aria-hidden={this._textAriaHidden}>{this.ariaDescribedByText}</span>}
+
 						<span class="ui5-switch-handle" part="handle"></span>
 					</div>
 				</div>

packages/main/src/themes/Switch.css

@@ -145,10 +145,12 @@
 	cursor: default;
 }
 
-.ui5-switch-root.ui5-switch--checked .ui5-switch-text--off {
+.ui5-switch-root.ui5-switch--checked .ui5-switch-text--off,
+.ui5-switch-root.ui5-switch--checked .ui5-switch-text--readonly {
 	visibility: var(--_ui5_switch_text_hidden);
 }
-.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--on {
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--on,
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--readonly {
 	visibility: var(--_ui5_switch_text_hidden);
 }