feat(ui5-tokenizer): align mobile popover title with spec

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

@@ -124,7 +124,7 @@ describe("Multi Input on mobile device", () => {
 				.find(".ui5-input-inner")
 				.realClick();
 
-		cy.get<ResponsivePopover>("@popover")
+			cy.get<ResponsivePopover>("@popover")
 				.ui5ResponsivePopoverOpened();
 
 			// Assert: Button should be enabled after adding a token

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

@@ -1,7 +1,9 @@
 import Tokenizer from "../../src/Tokenizer.js";
 import Button from "../../src/Button.js";
 import Token from "../../src/Token.js";
-import { TOKENIZER_DIALOG_OK_BUTTON, TOKENIZER_DIALOG_CANCEL_BUTTON, TOKENIZER_POPOVER_REMOVE } from "../../src/generated/i18n/i18n-defaults.js";
+import { TOKENIZER_DIALOG_OK_BUTTON, TOKENIZER_DIALOG_CANCEL_BUTTON, INPUT_SUGGESTIONS_TITLE } from "../../src/generated/i18n/i18n-defaults.js";
+import Label from "../../src/Label.js";
+import ResponsivePopover from "../../src/ResponsivePopover.js";
 
 describe("Phone mode", () => {
     beforeEach(() => {
@@ -133,7 +135,7 @@ describe("Phone mode", () => {
 
         cy.get("@nMoreDialog")
             .find(".ui5-responsive-popover-header .ui5-responsive-popover-header-text")
-            .should("have.text", TOKENIZER_POPOVER_REMOVE.defaultText);
+            .should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText);
     });
 
     it("Should fire the ui5-token-delete event when the 'X' is pressed in the n-more picker and confirmed with OK", () => {
@@ -213,6 +215,7 @@ describe("Phone mode", () => {
         cy.get("@tokenDeleteSpy")
             .should("not.have.been.called");
     });
+
     it("Should NOT fire the ui5-token-delete event when the 'X' is pressed in the n-more picker and canceled", () => {
         cy.mount(
             <Tokenizer style={{ width: "50%" }}>
@@ -255,4 +258,69 @@ describe("Phone mode", () => {
         cy.get("@tokenDeleteSpy")
             .should("not.have.been.called");
     });
+
+	it("Should test popover title when accessibleName is set", () => {
+		cy.mount(
+            <>
+                <Tokenizer style={{ width: "50%" }} accessibleName="Animals">
+                    <Token text="Lion"></Token>
+                    <Token text="Dog"></Token>
+                    <Token text="Cat"></Token>
+                </Tokenizer>
+			</>
+		);
+
+        cy.get("[ui5-tokenizer]")
+            .shadow()
+            .find(".ui5-tokenizer-more-text")
+            .as("nMoreLabel");
+
+        cy.get("@nMoreLabel")
+            .realClick();
+
+		cy.get("[ui5-tokenizer]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.as("popover")
+			.ui5ResponsivePopoverOpened();
+
+		// When accessibleName is present, it should be used as the mobile dialog title
+		cy.get("[ui5-tokenizer]")
+			.shadow()
+			.find("[ui5-responsive-popover] [slot='header'] [ui5-title]")
+			.should("have.text", "Animals");
+	});
+
+	it("Should test popover title when accessibleNameRef is set", () => {
+		cy.mount(
+            <>
+                <Label id="countries-label">Countries</Label>
+                <Tokenizer style={{ width: "50%" }} accessibleNameRef="countries-label">
+                    <Token text="Andora"></Token>
+                    <Token text="Bulgaria"></Token>
+                    <Token text="Canada"></Token>
+                </Tokenizer>
+			</>
+		);
+
+        cy.get("[ui5-tokenizer]")
+            .shadow()
+            .find(".ui5-tokenizer-more-text")
+            .as("nMoreLabel");
+
+        cy.get("@nMoreLabel")
+            .realClick();
+
+		cy.get("[ui5-tokenizer]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.as("popover")
+			.ui5ResponsivePopoverOpened();
+
+		// When accessibleNameRef is present, it should be used as the mobile dialog title
+		cy.get("[ui5-tokenizer]")
+			.shadow()
+			.find("[ui5-responsive-popover] [slot='header'] [ui5-title]")
+			.should("have.text", "Countries");
+	});
 })

packages/main/src/MultiComboBoxPopoverTemplate.tsx

@@ -10,6 +10,7 @@ import List from "./List.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import CheckBox from "./CheckBox.js";
+import Title from "./Title.js";
 import BusyIndicator from "./BusyIndicator.js";
 
 export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
@@ -39,7 +40,13 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 			{!this.loading && this._isPhone && <>
 				<div slot="header" class="ui5-responsive-popover-header" style={this.styles.popoverHeader}>
 					<div class="row">
-						<span>{this._headerTitleText}</span>
+						<Title
+							level="H1"
+							wrappingType="None"
+							class="ui5-responsive-popover-header-text"
+						>
+							{this._headerTitleText}
+						</Title>
 					</div>
 					<div class="row">
 						<Input

packages/main/src/Tokenizer.ts

@@ -61,14 +61,14 @@ import type Button from "./Button.js";
 import {
 	MULTIINPUT_SHOW_MORE_TOKENS,
 	TOKENIZER_ARIA_LABEL,
-	TOKENIZER_POPOVER_REMOVE,
 	TOKENIZER_ARIA_CONTAIN_TOKEN,
 	TOKENIZER_ARIA_CONTAIN_ONE_TOKEN,
 	TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS,
 	TOKENIZER_SHOW_ALL_ITEMS,
 	TOKENIZER_CLEAR_ALL,
 	TOKENIZER_DIALOG_OK_BUTTON,
 	TOKENIZER_DIALOG_CANCEL_BUTTON,
+	INPUT_SUGGESTIONS_TITLE,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -1178,7 +1178,7 @@ class Tokenizer extends UI5Element implements IFormInputElement {
 	}
 
 	get morePopoverTitle() {
-		return Tokenizer.i18nBundle.getText(TOKENIZER_POPOVER_REMOVE);
+		return getEffectiveAriaLabelText(this) || Tokenizer.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get overflownTokens() {

packages/main/src/features/InputSuggestionsTemplate.tsx

@@ -6,6 +6,7 @@ import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import Button from "../Button.js";
 import ListAccessibleRole from "../types/ListAccessibleRole.js";
+import Title from "../Title.js";
 
 export default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, mobileHeader?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {
 	const suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;
@@ -35,7 +36,13 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 				<>
 					<div slot="header" class="ui5-responsive-popover-header">
 						<div class="row">
-							<span>{this._headerTitleText}</span>
+							<Title
+								level="H1"
+								wrappingType="None"
+								class="ui5-responsive-popover-header-text"
+							>
+								{this._headerTitleText}
+							</Title>
 						</div>
 						<div class="row">
 							<div class="input-root-phone native-input-wrapper">
@@ -75,7 +82,7 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 				</div>
 			}
 
-			{ this.showSuggestions && suggestionsList.call(this) }
+			{this.showSuggestions && suggestionsList.call(this)}
 
 			{this._isPhone &&
 				<div slot="footer" class="ui5-responsive-popover-footer">

packages/main/src/i18n/messagebundle.properties

@@ -327,8 +327,8 @@ INPUT_SUGGESTIONS=Suggestions available
 #XCKL: Select all checkbox label
 MCB_SELECTED_ITEMS=Select All ({0} of {1})
 
-#XBUT: Default title text for mobile
-INPUT_SUGGESTIONS_TITLE=Select
+#XTIT: Default title text for mobile
+INPUT_SUGGESTIONS_TITLE=All Items
 
 #XACT: ARIA announcement for the Input suggestion result if one hit
 INPUT_SUGGESTIONS_ONE_HIT=1 result available
@@ -631,9 +631,6 @@ TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS=Contains {0} tokens
 #XACT: ARIA announcement for tokenizer label
 TOKENIZER_ARIA_LABEL=Tokenizer
 
-#XFLD: Tokenizer's Dialog title on mobile devices.
-TOKENIZER_POPOVER_REMOVE=All items
-
 #XFLD: Token number indicator which is used to show all tokens in Tokenizer when all of the tokens are hidden
 TOKENIZER_SHOW_ALL_ITEMS={0} Items
 

packages/main/src/themes/ResponsivePopoverCommon.css

@@ -169,7 +169,7 @@
 }
 
 .ui5-responsive-popover-header-text {
-	width: calc(100% - var(--_ui5_button_base_min_width));
+	width: 100%;
 }
 
 /* Header and footer layout */

packages/main/test/pages/MultiInput.html

@@ -276,7 +276,6 @@ <h1 class="sample-container-title">Multi Input with N-More</h1>
 
 	<div class="sample-container">
 		<h1>Tokens + Suggestions</h1>
-
 		<ui5-multi-input show-suggestions show-value-help-icon id="suggestion-token" value-state="Information">
 			<ui5-suggestion-item text="Aute"></ui5-suggestion-item>
 			<ui5-suggestion-item text="ad"></ui5-suggestion-item>

packages/main/test/pages/Tokenizer.html

@@ -30,7 +30,8 @@ <h1 class="sample-container-title">Expanded tokenizer</h1>
 			</ui5-tokenizer>
 		</div>
 		<h1 class="sample-container-title">Only nItems tokenizer</h1>
-		<ui5-tokenizer id="basic-tokenizer">
+		<ui5-label id="n-items-label">Tokenizer with 2 items</ui5-label>
+		<ui5-tokenizer id="basic-tokenizer" accessible-name-ref="n-items-label">
 			<ui5-token text="Your name and email address were configured automatically based
 			on your username and hostname. Please check that they are accurate."></ui5-token>
 			<ui5-token text="Your name and email address were configured automatically based
@@ -50,7 +51,7 @@ <h1 class="sample-container-title">Tokenizer with n-more items</h1>
 
 		<h1 class="sample-container-title">Tokenizer with selected token</h1>
 		<div class="tokenizer-container">
-			<ui5-tokenizer id="selected-tokenizer">
+			<ui5-tokenizer id="selected-tokenizer" accessible-name="Selected Token Example">
 				<ui5-token text="Andora"></ui5-token>
 				<ui5-token selected text="Bulgaria"></ui5-token>
 				<ui5-token text="Canada"></ui5-token>