feat(ui5-combobox/ui5-multi-combobox): enable for attribute support (SAP#11453)

Author: StefanDimitrov04

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

@@ -168,4 +168,31 @@ describe("Event firing", () => {
 		cy.get("@changeStub").should("not.have.been.called");
 	});
 });
+describe("Accessibility", () => {
+	it("should announce the associated label when ComboBox is focused", () => {
+		cy.mount(
+			<>
+				<label for="cb">Should be the aria-label</label>
+				<ComboBox id="cb"/>
+			</>
+		);
+
+		cy.get('label[for="cb"]')
+			.invoke('text')
+			.then((labelText) => {
+
+				cy.get("[ui5-combobox]")
+					.shadow()
+					.find("input")
+					.as("innerInput");
+
+				cy.get("@innerInput")
+					.click();
+
+				cy.get("@innerInput")
+					.should("have.attr", "aria-label", labelText);
+			});
+	});
+});
+
 

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

@@ -160,3 +160,30 @@ describe("Event firing", () => {
 			.should("have.been.calledTwice");
 	});
 });
+
+describe("Accessibility", () => {
+	it("should announce the associated label when MultiComboBox is focused", () => {
+		cy.mount(
+			<>
+				<label for="mcb">MultiComboBox aria-label</label>
+				<MultiComboBox id="mcb"></MultiComboBox>
+			</>
+		);
+
+		cy.get('label[for="mcb"]')
+			.invoke('text')
+			.then((labelText) => {
+
+				cy.get("[ui5-multi-combobox]")
+					.shadow()
+					.find("input")
+					.as("innerInput");
+
+				cy.get("@innerInput")
+					.click();
+
+				cy.get("@innerInput")
+					.should("have.attr", "aria-label", labelText);
+			});
+	});
+});

packages/main/src/ComboBox.ts

@@ -7,7 +7,7 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isPhone, isAndroid } from "@ui5/webcomponents-base/dist/Device.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -1351,7 +1351,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	get ariaLabelText(): string | undefined {
-		return getEffectiveAriaLabelText(this);
+		return getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this);
 	}
 
 	get clearIconAccessibleName() {

packages/main/src/MultiComboBox.ts

@@ -49,7 +49,7 @@ import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import { getAssociatedLabelForTexts, getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
@@ -1868,7 +1868,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
+		return getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this);
 	}
 
 	/**