feat(ui5-switch): add required property

packages/main/src/Switch.hbs

@@ -4,6 +4,7 @@
 	aria-label="{{ariaLabelText}}"
 	aria-checked="{{checked}}"
 	aria-disabled="{{effectiveAriaDisabled}}"
+	aria-description="{{_ariaDescription}}"
 	@click="{{_onclick}}"
 	@keyup="{{_onkeyup}}"
 	@keydown="{{_onkeydown}}"

packages/main/src/Switch.ts

@@ -10,6 +10,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { SWITCH_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/less.js";
@@ -188,6 +189,18 @@ class Switch extends UI5Element {
 	@property()
 	tooltip!: string;
 
+	/**
+	 * Defines whether the component is required.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.Switch.prototype.required
+	 * @defaultvalue false
+	 * @public
+	 * @since 1.16.0
+	 */
+	@property({ type: Boolean })
+	required!: boolean;
+
 	static i18nBundle: I18nBundle;
 
 	get sapNextIcon() {
@@ -247,6 +260,10 @@ class Switch extends UI5Element {
 		return this.disabled ? undefined : "0";
 	}
 
+	get _ariaDescription() {
+		return this.required ? Switch.i18nBundle.getText(SWITCH_ARIA_DESCRIPTION) : undefined;
+	}
+
 	get classes(): ClassMap {
 		const hasLabel = this.graphical || this.textOn || this.textOff;
 

packages/main/src/i18n/messagebundle.properties

@@ -253,6 +253,9 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Segmented button
 #XACT: ARIA description for slider handle
 SLIDER_ARIA_DESCRIPTION=Slider handle
 
+#XACT: ARIA description for required switch
+SWITCH_ARIA_DESCRIPTION=Required
+
 #XTXT Table and List "load more" row's text.
 LOAD_MORE_TEXT=More
 

packages/main/test/pages/Switch.html

@@ -42,6 +42,11 @@ <h3>Default Switch</h3>
 	</div>
 	<ui5-label id="lbl"></ui5-label>
 
+	<h3>Switch with required attribute</h3>
+	<div>
+		<ui5-switch id="requiredSwitch" required text-on="On" text-off="Off"></ui5-switch>
+	</div>
+
 	<h3>Change prevented Switch</h3>
 	<div class="switch2auto">
 		<ui5-switch id="switchprevented" text-on="On" text-off="Off"></ui5-switch>

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

@@ -62,4 +62,17 @@ describe("Switch general interaction", async () => {
 		assert.strictEqual(await switchPrevented.getProperty("checked"), currentChecked, "The switch is not checked");
 	});
 
+	it("required property adds aria-description attribute", async () => {
+		const switchRoot = await browser.$("#requiredSwitch").shadow$(".ui5-switch-root");
+
+		let resourceBundleText = null;
+
+		resourceBundleText = await browser.executeAsync(done => {
+			const switchComponent = document.getElementById("requiredSwitch");
+			done(switchComponent.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.SWITCH_ARIA_DESCRIPTION));
+		})
+
+		assert.strictEqual(await switchRoot.getAttribute("aria-description"), resourceBundleText, "The aria-description attribute is set");
+	})
+
 });