fix(ui5-switch): adjust additional description announcements (#4927)

* fix(ui5-switch): adjust additional description announcements

Problem description:
An additional description provided trough the
"accessible-name-ref" attribute wasn't announced by
the screen reader.

Solution:
The text for "on" or "off" state is now moved
from aria-labelledby attribute to the "aria-label"
attribute along with the additional description
provided by the user.

Fixes: #4887

packages/main/src/Switch.hbs

@@ -4,7 +4,6 @@
 	aria-label="{{ariaLabelText}}"
 	aria-checked="{{checked}}"
 	aria-disabled="{{ariaDisabled}}"
-	aria-labelledby="{{_id}}-hiddenText"
 	@click="{{_onclick}}"
 	@keyup="{{_onkeyup}}"
 	@keydown="{{_onkeydown}}"
@@ -47,5 +46,4 @@
 	</div>
 
 	<input type='checkbox' ?checked="{{checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
-	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{hiddenText}}</span>
 </div>

packages/main/src/Switch.js

@@ -10,11 +10,6 @@ import "@ui5/webcomponents-icons/dist/less.js";
 import Icon from "./Icon.js";
 import SwitchDesign from "./types/SwitchDesign.js";
 
-import {
-	SWITCH_ON,
-	SWITCH_OFF,
-} from "./generated/i18n/i18n-defaults.js";
-
 // Template
 import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
 
@@ -100,6 +95,8 @@ const metadata = {
 		/**
 		 * Sets the accessible aria name of the component.
 		 *
+		 * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.
+		 * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.
 		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public
@@ -112,6 +109,8 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the component.
 		 *
+		 * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.
+		 * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -263,19 +262,19 @@ class Switch extends UI5Element {
 	}
 
 	get accessibilityOnText() {
-		return this._textOn || Switch.i18nBundle.getText(SWITCH_ON);
+		return this._textOn;
 	}
 
 	get accessibilityOffText() {
-		return this._textOff || Switch.i18nBundle.getText(SWITCH_OFF);
+		return this._textOff;
 	}
 
 	get hiddenText() {
 		return this.checked ? this.accessibilityOnText : this.accessibilityOffText;
 	}
 
 	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
+		return [getEffectiveAriaLabelText(this), this.hiddenText].join(" ").trim();
 	}
 
 	static get dependencies() {

packages/main/src/i18n/messagebundle.properties

@@ -226,12 +226,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Segmented button
 #XACT: ARIA description for slider handle
 SLIDER_ARIA_DESCRIPTION=Slider handle
 
-#XACT: ARIA announcement for the switch on
-SWITCH_ON=On
-
-#XACT: ARIA announcement for the switch off
-SWITCH_OFF=Off
-
 #XTXT Table and List "load more" row's text.
 LOAD_MORE_TEXT=More
 

packages/main/test/pages/Switch.html

@@ -29,7 +29,7 @@ <h3>Default Switch</h3>
 
 	<h3>No Label</h3>
 	<div class="switch2auto"></div>
-		<ui5-switch></ui5-switch>
+		<ui5-switch id="noLabel"></ui5-switch>
 		<ui5-switch checked></ui5-switch>
 	</div>
 

packages/main/test/samples/Switch.sample.html

@@ -40,16 +40,16 @@ <h3>Basic Switch</h3>
 <section>
 	<h3>Graphical Switch</h3>
 	<div class="snippet">
-		<ui5-switch design="Graphical"></ui5-switch>
-		<ui5-switch design="Graphical" checked></ui5-switch>
-		<ui5-switch design="Graphical" disabled></ui5-switch>
-		<ui5-switch design="Graphical" checked disabled></ui5-switch>
+		<ui5-switch accessible-name="graphical" design="Graphical"></ui5-switch>
+		<ui5-switch accessible-name="graphical" design="Graphical" checked></ui5-switch>
+		<ui5-switch accessible-name="graphical" design="Graphical" disabled></ui5-switch>
+		<ui5-switch accessible-name="graphical" design="Graphical" checked disabled></ui5-switch>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
-<ui5-switch design="Graphical"></ui5-switch>
-<ui5-switch design="Graphical" checked></ui5-switch>
-<ui5-switch design="Graphical" disabled></ui5-switch>
-<ui5-switch design="Graphical" checked disabled></ui5-switch>
+<ui5-switch accessible-name="graphical" design="Graphical"></ui5-switch>
+<ui5-switch accessible-name="graphical" design="Graphical" checked></ui5-switch>
+<ui5-switch accessible-name="graphical" design="Graphical" disabled></ui5-switch>
+<ui5-switch accessible-name="graphical" design="Graphical" checked disabled></ui5-switch>
 	</xmp></pre>
 </section>
 

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

@@ -32,13 +32,20 @@ describe("Switch general interaction", 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");
+		assert.strictEqual(await switchEl.getAttribute("aria-label"), "Geographical location No", "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");
 
 		assert.strictEqual(await switchEl.getAttribute("role"), "switch", "Proper role attribute is set");
-		assert.strictEqual(await switchEl.getAttribute("aria-label"), "Use GPS location", "Attribute is reflected");
+		assert.strictEqual(await switchEl.getAttribute("aria-label"), "Use GPS location No", "Attribute is reflected");
 	});
+
+	it("aria-label attribute is properly set when text-on and text-off attributes aren't set", async () => {
+		const switchEl = await browser.$("#noLabel").shadow$("div");
+
+		assert.notOk(await switchEl.getAttribute("aria-label"), "Attribute is reflected");
+	});
+
 });