fix(ui5-select): announce header text on mobile

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

@@ -462,6 +462,25 @@ describe("Select - Popover", () => {
 			.should("have.text", "Custom message");
 	});
 
+	it("ResponsivePopover should not have accessible name on desktop", () => {
+		cy.mount(
+			<Select id="desktopSelect">
+				<Option value="option1">Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="option3">Option 3</Option>
+			</Select>
+		);
+
+		// Open the popover
+		cy.get("#desktopSelect").realClick();
+
+		// Check that the ResponsivePopover does not have an accessible name on desktop
+		cy.get("#desktopSelect")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("not.have.attr", "accessible-name");
+	});
+
 	it("Value state message popover can extend beyond select width", () => {
 		cy.mount(
 			<Select valueState="Critical">

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

@@ -2,9 +2,48 @@ import Select from "../../src/Select.js";
 import Option from "../../src/Option.js";
 
 describe("Select mobile general interaction", () => {
-	it("Changes selection in Dialog", () => {
-		cy.get("html").viewport("iphone-x");
+	beforeEach(() => {
+		cy.ui5SimulateDevice("phone");
+	});
+
+	it("ResponsivePopover accessible name should match the expected title text", () => {
+		cy.mount(
+			<Select id="select">
+				<Option value="option1">Option 1</Option>
+				<Option value="option2">Option 2</Option>
+			</Select>
+		);
+
+		// Open the popover
+		cy.get("#select").realClick();
+
+        // Check if accessible-name is equal to select._headerTitleText
+        cy.get("#select").invoke("prop", "_headerTitleText").then(_headerTitleText => {
+            cy.get("#select")
+                .shadow()
+                .find("[ui5-responsive-popover]")
+                .should("have.attr", "accessible-name")
+                .and("equal", _headerTitleText);
+        });
+    });
 
+	it("should focus the selected option when popover opens", () => {
+		cy.mount(
+			<Select id="select" value="option2">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+				<Option id="opt3" value="option3">Option 3</Option>
+			</Select>
+		);
+        cy.get("#select").realClick();
+
+		cy.get("#opt2").should("have.attr", "focused");
+		cy.get("#opt2").shadow()
+            .find(".ui5-li-root")
+            .should("be.focused");
+	});
+
+	it("Changes selection in Dialog", () => {
 		cy.mount(
 			<Select>
 				<Option value="Cozy">Cozy</Option>
@@ -40,4 +79,4 @@ describe("Select mobile general interaction", () => {
 
 		cy.get("@select").should("have.prop", "value", "Cozy");
 	});
-});
+});

packages/main/src/Select.ts

@@ -869,6 +869,11 @@ class Select extends UI5Element implements IFormInputElement {
 	_applyFocusToSelectedItem() {
 		this.options.forEach(option => {
 			option.focused = option.selected;
+			if (option.focused && isPhone()) {
+				// on phone, the popover opens full screen (dialog)
+				// move focus to option to read out dialog header
+				option.focus();
+			}
 		});
 	}
 

packages/main/src/SelectPopoverTemplate.tsx

@@ -27,6 +27,7 @@ export default function SelectPopoverTemplate(this: Select) {
 					onBeforeOpen={this._beforeOpen}
 					onClose={this._afterClose}
 					onKeyDown={this._onkeydown}
+					accessibleName={this._isPhone ? this._headerTitleText : undefined}
 				>
 					{this._isPhone &&
 						<div slot="header" class="ui5-responsive-popover-header">