feat(ui5-combobox, ui5-multi-combobox): show associated label as mobile dialog header title

The mobile full-screen dialog for ComboBox and MultiComboBox now displays
the associated label text as the header title instead of the generic
"All Items". Falls back to "All Items" when no label exists.

Author: ivoplashkov

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

@@ -2,7 +2,8 @@ import ComboBox from "../../src/ComboBox.js";
 import ComboBoxItem from "../../src/ComboBoxItem.js";
 import ComboBoxItemGroup from "../../src/ComboBoxItemGroup.js";
 import type ResponsivePopover from "../../src/ResponsivePopover.js";
-import { COMBOBOX_DIALOG_OK_BUTTON, COMBOBOX_DIALOG_CANCEL_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
+import { COMBOBOX_DIALOG_OK_BUTTON, COMBOBOX_DIALOG_CANCEL_BUTTON, INPUT_SUGGESTIONS_TITLE } from "../../src/generated/i18n/i18n-defaults.js";
+import Label from "../../src/Label.js";
 
 describe("Basic mobile picker rendering and interaction", () => {
 	beforeEach(() => {
@@ -618,3 +619,54 @@ describe("Mobile Highlighting", () => {
 			.should("contain.html", "<b>A</b>");
 	});
 });
+
+describe("Dialog header title", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice("phone");
+	});
+
+	it("Should display label text as dialog header title when label for is used", () => {
+		cy.mount(
+			<>
+				<Label for="myCB">Country</Label>
+				<ComboBox id="myCB">
+					<ComboBoxItem text="Algeria" />
+					<ComboBoxItem text="Argentina" />
+				</ComboBox>
+			</>
+		);
+
+		cy.get("#myCB").realClick();
+
+		cy.get("#myCB")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("#myCB")
+			.shadow()
+			.find("[ui5-responsive-popover] .ui5-responsive-popover-header .row span")
+			.should("have.text", "Country");
+	});
+
+	it("Should fallback to 'All Items' when no label is associated", () => {
+		cy.mount(
+			<ComboBox id="myCB">
+				<ComboBoxItem text="Algeria" />
+				<ComboBoxItem text="Argentina" />
+			</ComboBox>
+		);
+
+		cy.get("#myCB").realClick();
+
+		cy.get("#myCB")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("#myCB")
+			.shadow()
+			.find("[ui5-responsive-popover] .ui5-responsive-popover-header .row span")
+			.should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText);
+	});
+});

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

@@ -1,7 +1,8 @@
-import { SHOW_SELECTED_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
+import { SHOW_SELECTED_BUTTON, INPUT_SUGGESTIONS_TITLE } from "../../src/generated/i18n/i18n-defaults.js";
 import MultiComboBox from "../../src/MultiComboBox.js";
 import MultiComboBoxItem from "../../src/MultiComboBoxItem.js";
 import ResponsivePopover from "../../src/ResponsivePopover.js";
+import Label from "../../src/Label.js";
 
 describe("MultiComboBox mobile general interaction", () => {
     beforeEach(() => {
@@ -874,4 +875,61 @@ describe("Accessibility", () => {
             .should("have.attr", "accessible-name", SHOW_SELECTED_BUTTON.defaultText);
 
     });
+});
+
+describe("Dialog header title", () => {
+    beforeEach(() => {
+        cy.ui5SimulateDevice("phone");
+    });
+
+    it("Should display label text as dialog header title when label for is used", () => {
+        cy.mount(
+            <>
+                <Label for="myMCB">Country</Label>
+                <MultiComboBox id="myMCB">
+                    <MultiComboBoxItem text="Item 1" />
+                    <MultiComboBoxItem text="Item 2" />
+                </MultiComboBox>
+            </>
+        );
+
+        cy.get("#myMCB")
+            .shadow()
+            .find("input")
+            .realClick();
+
+        cy.get("#myMCB")
+            .shadow()
+            .find<ResponsivePopover>("[ui5-responsive-popover]")
+            .ui5ResponsivePopoverOpened();
+
+        cy.get("#myMCB")
+            .shadow()
+            .find("[ui5-responsive-popover] .ui5-responsive-popover-header-text")
+            .should("have.text", "Country");
+    });
+
+    it("Should fallback to 'All Items' when no label is associated", () => {
+        cy.mount(
+            <MultiComboBox id="myMCB">
+                <MultiComboBoxItem text="Item 1" />
+                <MultiComboBoxItem text="Item 2" />
+            </MultiComboBox>
+        );
+
+        cy.get("#myMCB")
+            .shadow()
+            .find("input")
+            .realClick();
+
+        cy.get("#myMCB")
+            .shadow()
+            .find<ResponsivePopover>("[ui5-responsive-popover]")
+            .ui5ResponsivePopoverOpened();
+
+        cy.get("#myMCB")
+            .shadow()
+            .find("[ui5-responsive-popover] .ui5-responsive-popover-header-text")
+            .should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText);
+    });
 });

packages/main/src/ComboBox.ts

@@ -1533,7 +1533,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	get _headerTitleText() {
-		return ComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return getAssociatedLabelForTexts(this) || ComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get _iconAccessibleNameText() {

packages/main/src/MultiComboBox.ts

@@ -2259,7 +2259,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	get _headerTitleText() {
-		return MultiComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return getAssociatedLabelForTexts(this) || MultiComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get _iconAccessibleNameText() {