fix(ui5-step-input, ui5-switch): support label 'for' attribute in aria-label (#13057)

Adds support for 'for' attribute to `ui5-switch` and `ui5-step-input`.

Usage
```
<ui5-label for="switch">Enable notifications</ui5-label>
<ui5-switch id="switch"></ui5-switch>
```
This will set the aria-label of the `ui5-switch` to "Enable notifications", which can be read by screen readers. Similarly, you can do this for the `ui5-step-input`.

Related to: #10710

Author: didip1000

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

@@ -1,4 +1,5 @@
 import StepInput from "../../src/StepInput.js";
+import Label from "../../src/Label.js";
 import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 import "../../src/Assets.js";
 
@@ -950,4 +951,24 @@ describe("Validation inside form", () => {
 		cy.get("#stepInput:invalid")
 			.should("not.exist", "StepInput with value lower than max should not have :invalid CSS class");
 	});
+});
+
+describe("Accessibility", () => {
+	it("should have correct aria-label when associated with a label via 'for' attribute", () => {
+		const labelText = "Quantity";
+
+		cy.mount(
+			<>
+				<Label for="stepInput">{labelText}</Label>
+				<StepInput id="stepInput"></StepInput>
+			</>
+		);
+
+		cy.get("[ui5-step-input]")
+			.shadow()
+			.find("[ui5-input]")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-label", labelText);
+	});
 });

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

@@ -227,3 +227,21 @@ describe("General interactions in form", () => {
 	});
 
 });
+
+describe("Accessibility", () => {
+	it("should have correct aria-label when associated with a label via 'for' attribute", () => {
+		const labelText = "Enable notifications";
+
+		cy.mount(
+			<>
+				<Label for="switch">{labelText}</Label>
+				<Switch id="switch"></Switch>
+			</>
+		);
+
+		cy.get("[ui5-switch]")
+			.shadow()
+			.find(".ui5-switch-root")
+			.should("have.attr", "aria-label", labelText);
+	});
+});

packages/main/src/StepInput.ts

@@ -23,7 +23,7 @@ import {
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
@@ -391,7 +391,7 @@ class StepInput extends UI5Element implements IFormInputElement {
 	get accInfo(): InputAccInfo {
 		return {
 			"ariaRequired": this.required,
-			"ariaLabel": getEffectiveAriaLabelText(this),
+			"ariaLabel": getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this),
 		};
 	}
 

packages/main/src/Switch.ts

@@ -10,7 +10,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/less.js";
@@ -320,7 +320,7 @@ class Switch extends UI5Element implements IFormInputElement {
 	}
 
 	get ariaLabelText() {
-		return [getEffectiveAriaLabelText(this), this.hiddenText].join(" ").trim();
+		return [getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this), this.hiddenText].join(" ").trim();
 	}
 }
 

packages/main/test/pages/StepInput.html

@@ -191,6 +191,18 @@ <h3>Form validation</h3>
 			</form>
 		</section>
 
+
+	<h3>Accessibility</h3>
+	<section>
+		<ui5-label for="stepInputLabel">In Cart:</ui5-label>
+		<ui5-step-input id="stepInputLabel"
+			value="3"
+			min="0"
+			max="10"
+			step="1"
+		></ui5-step-input>
+	</section>
+
 	<script>
 		const labelChange = document.getElementById('myLabelChange');
 		const siCozy = document.getElementById('stepInputCozy');

packages/main/test/pages/Switch.html

@@ -108,6 +108,15 @@ <h3>sap_horizon</h3>
         <ui5-switch></ui5-switch>
 		<ui5-switch checked></ui5-switch>
     </div>
+
+	<h3>Accessibility</h3>
+	<section>
+		<ui5-label for="switchLabel">Do you Agree?</ui5-label>
+		<ui5-switch id="switchLabel"
+			text-on="Yes"
+			text-off="No"
+		></ui5-switch>
+	</section>
 </body>
 
 <script>