feat(ui5-switch): provide accessible-name attribute support (#4735)

Application developers could now provide additional label
text for the aria-label attribute of the ui5-switch root element
trough the "accessibleName" property.

Fixes: #4147

Author: unazko

packages/main/src/Switch.js

@@ -97,6 +97,18 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Sets the accessible aria name of the component.
+		 *
+		 * @type {String}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.2.0
+		 */
+		 accessibleName: {
+			type: String,
+		},
+
 		/**
 		 * Receives id(or many ids) of the elements that label the component.
 		 *

packages/main/test/pages/Switch.html

@@ -22,6 +22,7 @@ <h3>Default Switch</h3>
 	</div>
 
 	<div class="switch2auto">
+		<ui5-switch id="switchAccName" accessible-name="Geographical location" class="switch3auto" text-on="Yes" text-off="No"></ui5-switch>
 		<ui5-label id="descriptionText">Use GPS location</ui5-label>
 		<ui5-switch id="switchAccNameRef" accessible-name-ref="descriptionText" class="switch3auto" text-on="Yes" text-off="No"></ui5-switch>
 	</div>

packages/main/test/specs/Switch.spec.js

@@ -28,6 +28,13 @@ describe("Switch general interaction", async () => {
 		assert.strictEqual(await field.getProperty("value"), "3", "Change event should not be called any more");
 	});
 
+	it("setting accessible-name on the host is reflected on the button tag", async () => {
+		const switchEl = await browser.$("#switchAccName").shadow$("div");
+
+		assert.strictEqual(await switchEl.getAttribute("role"), "switch", "Proper role attribute is set");
+		assert.strictEqual(await switchEl.getAttribute("aria-label"), "Geographical location", "Attribute is reflected");
+	});
+
 	it("setting accessible-name-ref on the host is reflected on the button tag", async () => {
 		const switchEl = await browser.$("#switchAccNameRef").shadow$("div");