fix(ui5-select): fix acc finding

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

@@ -284,6 +284,68 @@ describe("Select - Accessibility", () => {
 			.should("have.attr", "aria-roledescription", EXPECTED_ARIA_ROLEDESCRIPTION);
 	});
 
+	it("tests listbox accessible naming in popover", () => {
+		cy.mount(
+			<>
+				<Select id="selectWithLabel" accessibleName="Choose country">
+					<Option value="DE">Germany</Option>
+					<Option value="US">USA</Option>
+				</Select>
+				<Select id="selectWithRef" accessibleNameRef="labelRef">
+					<Option value="One">One</Option>
+					<Option value="Two">Two</Option>
+				</Select>
+				<Select id="selectWithoutLabel">
+					<Option value="A">A</Option>
+					<Option value="B">B</Option>
+				</Select>
+				<span id="labelRef">Label from ref</span>
+			</>
+		);
+
+		// Test listbox with consumer-provided accessible name
+		cy.get("#selectWithLabel")
+			.shadow()
+			.find("[ui5-list]")
+			.shadow()
+			.find(".ui5-list-ul")
+			.should("have.attr", "aria-label", "Choose country");
+
+		// Test listbox with accessibleNameRef
+		cy.get("#selectWithRef")
+			.shadow()
+			.find("[ui5-list]")
+			.shadow()
+			.find(".ui5-list-ul")
+			.should("have.attr", "aria-label", "Label from ref");
+
+		// Test listbox with fallback label when no consumer label is provided
+		cy.get("#selectWithoutLabel")
+			.shadow()
+			.find("[ui5-list]")
+			.shadow()
+			.find(".ui5-list-ul")
+			.should("have.attr", "aria-label", "All Items");
+	});
+
+	it("tests popover accessible name with 'Select:' prefix on mobile", () => {
+		cy.ui5SimulateDevice("phone");
+
+		cy.mount(
+			<Select id="mobileSelect" accessibleName="Countries">
+				<Option value="DE">Germany</Option>
+				<Option value="US">USA</Option>
+			</Select>
+		);
+
+		cy.get("#mobileSelect").realClick();
+
+		cy.get("#mobileSelect")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("have.attr", "accessible-name", "Select: Countries");
+	});
+
 	it("tests Select with valueState Positive and aria-describedby", () => {
 		cy.mount(
 			<Select valueState="Positive">

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

@@ -1,7 +1,11 @@
 import Select from "../../src/Select.js";
 import Option from "../../src/Option.js";
 import type ResponsivePopover from "../../src/ResponsivePopover.js";
-import { SELECT_DIALOG_CANCEL_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
+import {
+	SELECT_DIALOG_CANCEL_BUTTON,
+	SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX,
+	SELECT_LISTBOX_LABEL,
+} from "../../src/generated/i18n/i18n-defaults.js";
 
 describe("Select mobile general interaction", () => {
 	beforeEach(() => {
@@ -18,16 +22,13 @@ describe("Select mobile general interaction", () => {
 
 		// Open the popover
 		cy.get("#select").realClick();
+		const expectedAccessibleName = `${SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX.defaultText} ${SELECT_LISTBOX_LABEL.defaultText}`;
 
-        // 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);
-        });
-    });
+		cy.get("#select")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("have.attr", "accessible-name", expectedAccessibleName);
+	});
 
 	it("should focus the selected option when popover opens", () => {
 		cy.mount(

packages/main/src/Select.ts

@@ -49,9 +49,10 @@ import {
 	VALUE_STATE_TYPE_INFORMATION,
 	VALUE_STATE_TYPE_ERROR,
 	VALUE_STATE_TYPE_WARNING,
-	INPUT_SUGGESTIONS_TITLE,
 	LIST_ITEM_POSITION,
 	SELECT_ROLE_DESCRIPTION,
+	SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX,
+	SELECT_LISTBOX_LABEL,
 	SELECT_DIALOG_CANCEL_BUTTON,
 	FORM_SELECTABLE_REQUIRED,
 } from "./generated/i18n/i18n-defaults.js";
@@ -91,6 +92,8 @@ type SelectLiveChangeEventDetail = {
 	selectedOption: IOption,
 }
 
+type I18nTextArg = Parameters<I18nBundle["getText"]>[0];
+
 const isPrintableCharacter = (e: KeyboardEvent) => {
 	return e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
 };
@@ -1047,7 +1050,7 @@ class Select extends UI5Element implements IFormInputElement {
 	}
 
 	get _headerTitleText() {
-		return Select.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return Select.i18nBundle.getText(SELECT_LISTBOX_LABEL as I18nTextArg);
 	}
 
 	get _cancelButtonText() {
@@ -1121,6 +1124,19 @@ class Select extends UI5Element implements IFormInputElement {
 		return getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this);
 	}
 
+	get _effectiveListAccessibleName() {
+		return this.ariaLabelText || this._headerTitleText;
+	}
+
+	get _effectivePopoverAccessibleName() {
+		const fieldName = this._effectiveListAccessibleName;
+		if (!fieldName) {
+			return undefined;
+		}
+		const prefix = Select.i18nBundle.getText(SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX as I18nTextArg);
+		return `${prefix} ${fieldName}`;
+	}
+
 	get shouldDisplayDefaultValueStateMessage() {
 		return !this.valueStateMessage.length && this.hasValueStateText;
 	}

packages/main/src/SelectPopoverTemplate.tsx

@@ -26,7 +26,7 @@ export default function SelectPopoverTemplate(this: Select) {
 					onBeforeOpen={this._beforeOpen}
 					onClose={this._afterClose}
 					onKeyDown={this._onkeydown}
-					accessibleName={this._isPhone ? this._headerTitleText : undefined}
+					accessibleName={this._isPhone ? this._effectivePopoverAccessibleName : undefined}
 				>
 					{this._isPhone &&
 						<div slot="header" class="ui5-responsive-popover-header">
@@ -62,6 +62,7 @@ export default function SelectPopoverTemplate(this: Select) {
 						onMouseDown={this._itemMousedown}
 						onItemClick={this._handleItemPress}
 						accessibleRole="ListBox"
+						accessibleName={this._effectiveListAccessibleName}
 					>
 						<slot></slot>
 					</List>

packages/main/src/i18n/messagebundle.properties

@@ -321,6 +321,12 @@ SELECT_ROLE_DESCRIPTION=Listbox
 #XTXT: MultiComboBox and ComboBox icon accessible name
 SELECT_OPTIONS=Select Options
 
+#XACT: ARIA announcement prefix for Select dialog accessible name on mobile (without trailing space)
+SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Select:
+
+#XACT: ARIA accessible name for Select's listbox when no explicit label is provided
+SELECT_LISTBOX_LABEL=All Items
+
 #XTXT: MultiComboBox show selected items button accessible name
 SHOW_SELECTED_BUTTON=Show Selected Items Only