fix(ui5-select): aria-controls attr added (#12050)

Fixes: #12018

Author: yanaminkova

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

@@ -224,6 +224,27 @@ describe("Select - Accessibility", () => {
 					.find(".ui5-select-label-root")
 					.should("have.attr", "aria-label", labelText);
 			});
+	});
+
+	it("should have aria-controls pointing to the responsive popover", () => {
+		cy.mount(
+			<Select>
+				<Option value="option1">Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="option3">Option 3</Option>
+			</Select>
+		);
+
+		cy.get("[ui5-select]")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.invoke("attr", "id")
+			.then((popoverId) => {
+				cy.get("[ui5-select]")
+					.shadow()
+					.find(".ui5-select-label-root")
+					.should("have.attr", "aria-controls", popoverId);
+			});
 	});	
 
 	it("Tests accessibility", () => {

packages/main/src/Select.ts

@@ -899,6 +899,10 @@ class Select extends UI5Element implements IFormInputElement {
 		return this.hasValueState ? `${this._id}-valueStateDesc` : undefined;
 	}
 
+	get responsivePopoverId() {
+		return `${this._id}-popover`;
+	}
+
 	get isDisabled() {
 		return this.disabled || undefined;
 	}

packages/main/src/SelectPopoverTemplate.tsx

@@ -11,6 +11,7 @@ export default function SelectPopoverTemplate(this: Select) {
 		<>
 			{this.options.length > 0 &&
 				<ResponsivePopover
+					id={this.responsivePopoverId}
 					class={{
 						"ui5-select-popover": true,
 						...this.classes.popover

packages/main/src/SelectTemplate.tsx

@@ -40,6 +40,7 @@ export default function SelectTemplate(this: Select) {
 					onKeyUp={this._onkeyup}
 					onFocusIn={this._onfocusin}
 					onFocusOut={this._onfocusout}
+					aria-controls={this.responsivePopoverId}
 				>
 					{this.hasCustomLabel
 						? <slot name="label"></slot>