From 2a798218692ff5f33b6c158521430bbc620ca3e2 Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Wed, 28 Jan 2026 17:48:08 +0200 Subject: [PATCH 1/4] feat(ui5-tokenizer/ui5-multi-input/ui5-multi-combobox): align mobile popover title with spec --- .../cypress/specs/MultiComboBox.mobile.cy.tsx | 171 +++++++++++++++- .../cypress/specs/MultiInput.mobile.cy.tsx | 184 +++++++++++++++++- .../cypress/specs/Tokenizer.mobile.cy.tsx | 72 ++++++- packages/main/src/Input.ts | 3 +- packages/main/src/MultiComboBox.ts | 2 +- .../main/src/MultiComboBoxPopoverTemplate.tsx | 9 +- packages/main/src/MultiInputTemplate.tsx | 2 + packages/main/src/Tokenizer.ts | 4 +- .../src/features/InputSuggestionsTemplate.tsx | 11 +- .../main/src/i18n/messagebundle.properties | 7 +- .../src/themes/ResponsivePopoverCommon.css | 2 +- packages/main/test/pages/MultiInput.html | 13 +- packages/main/test/pages/Tokenizer.html | 5 +- 13 files changed, 460 insertions(+), 25 deletions(-) diff --git a/packages/main/cypress/specs/MultiComboBox.mobile.cy.tsx b/packages/main/cypress/specs/MultiComboBox.mobile.cy.tsx index 67726bb4707d..8d477370b65d 100644 --- a/packages/main/cypress/specs/MultiComboBox.mobile.cy.tsx +++ b/packages/main/cypress/specs/MultiComboBox.mobile.cy.tsx @@ -1,4 +1,5 @@ -import { SHOW_SELECTED_BUTTON } from "../../src/generated/i18n/i18n-defaults.js"; +import { INPUT_SUGGESTIONS_TITLE, SHOW_SELECTED_BUTTON } from "../../src/generated/i18n/i18n-defaults.js"; +import Label from "../../src/Label.js"; import MultiComboBox from "../../src/MultiComboBox.js"; import MultiComboBoxItem from "../../src/MultiComboBoxItem.js"; import ResponsivePopover from "../../src/ResponsivePopover.js"; @@ -874,4 +875,172 @@ describe("Accessibility", () => { .should("have.attr", "accessible-name", SHOW_SELECTED_BUTTON.defaultText); }); + + it("Should test dialog with default title", () => { + cy.mount( + + + + + + + ); + + cy.get("[ui5-multi-combobox]") + .as("multiComboBox"); + + cy.get("@multiComboBox") + .shadow() + .find("#ui5-multi-combobox-input") + .realClick(); + + cy.get("@multiComboBox") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + cy.get("@multiComboBox") + .shadow() + .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") + .should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText); + }); + + it("Should test dialog title with accessibleName present and tokenizer n-more is pressed", () => { + cy.mount( + + + + + + + ); + + cy.get("[ui5-multi-combobox]") + .as("multiComboBox"); + + cy.get("@multiComboBox") + .shadow() + .find('.ui5-multi-combobox-tokenizer') + .as("tokenizer") + .shadow() + .find(".ui5-tokenizer-more-text") + .as("moreText") + .realClick(); + + cy.get("@multiComboBox") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + // When accessibleName is present, it should be used as the mobile dialog title + cy.get("@multiComboBox") + .shadow() + .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") + .should("have.text", "Custom Title"); + }); + + it("Should test dialog title with accessibleName present and MultiComboBox is focused", () => { + cy.mount( + + + + + + + ); + + cy.get("[ui5-multi-combobox]") + .as("multiComboBox"); + + cy.get("@multiComboBox") + .shadow() + .find("#ui5-multi-combobox-input") + .realClick(); + + cy.get("@multiComboBox") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + // When accessibleName is present, it should be used as the mobile dialog title + cy.get("@multiComboBox") + .shadow() + .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") + .should("have.text", "Custom Title"); + }); + + it("Should test dialog title with accessibleNameRef is present and tokenizer n-more is pressed", () => { + cy.mount( + <> + + + + + + + + + ); + + cy.get("[ui5-multi-combobox]") + .as("multiComboBox"); + + cy.get("@multiComboBox") + .shadow() + .find('.ui5-multi-combobox-tokenizer') + .as("tokenizer") + .shadow() + .find(".ui5-tokenizer-more-text") + .as("moreText") + .realClick(); + + cy.get("@multiComboBox") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + // When accessibleNameRef is present, it should be used as the mobile dialog title + cy.get("@multiComboBox") + .shadow() + .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") + .should("have.text", "Custom Title"); + }); + + it("Should test dialog title with accessibleNameRef is present and MultiComboBox is focused", () => { + cy.mount( + <> + + + + + + + + + ); + + cy.get("[ui5-multi-combobox]") + .as("multiComboBox"); + + cy.get("@multiComboBox") + .shadow() + .find("#ui5-multi-combobox-input") + .realClick(); + + cy.get("@multiComboBox") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + // When accessibleNameRef is present, it should be used as the mobile dialog title + cy.get("@multiComboBox") + .shadow() + .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") + .should("have.text", "Custom Title"); + }); }); \ No newline at end of file diff --git a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx index 375fe099fa7b..766c6134dd59 100644 --- a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx +++ b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx @@ -4,6 +4,8 @@ import SuggestionItem from "../../src/SuggestionItem.js"; import Button from "../../src/Button.js"; import "../../src/features/InputSuggestions.js"; import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; +import { INPUT_SUGGESTIONS_TITLE } from "../../src/generated/i18n/i18n-defaults.js"; +import Label from "../../src/Label.js"; const createTokenFromText = (text: string): HTMLElement => { const token = document.createElement("ui5-token"); @@ -124,7 +126,7 @@ describe("Multi Input on mobile device", () => { .find(".ui5-input-inner") .realClick(); - cy.get("@popover") + cy.get("@popover") .ui5ResponsivePopoverOpened(); // Assert: Button should be enabled after adding a token @@ -212,4 +214,184 @@ describe("Multi Input on mobile device", () => { .should("have.length", 3); }); }); + + describe("Accessibility", () => { + it("Should test dialog with default title", () => { + cy.mount( + + + + + + + + + ); + + cy.get("[ui5-multi-input]") + .as("multiInput"); + + cy.get("@multiInput") + .shadow() + .find(".ui5-input-inner") + .realClick(); + + cy.get("@multiInput") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + cy.get("@multiInput") + .shadow() + .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") + .should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText); + }); + + it("Should test dialog title with accessibleName is present and n-more button of tokenizer is pressed", () => { + cy.mount( + + + + + + + + + ); + + cy.get("[ui5-multi-input]") + .as("multiInput"); + + cy.get("@multiInput") + .shadow() + .find('.ui5-multi-input-tokenizer') + .as("tokenizer") + .shadow() + .find(".ui5-tokenizer-more-text") + .as("moreText") + .realClick(); + + cy.get("@tokenizer") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + // When accessibleName is present, it should be used as the mobile dialog title + cy.get("@multiInput") + .shadow() + .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") + .should("have.text", "Custom Title"); + }); + + it("Should test dialog title with accessibleName is present and input is focused", () => { + cy.mount( + + + + + + + + + ); + + cy.get("[ui5-multi-input]") + .as("multiInput"); + + cy.get("@multiInput") + .shadow() + .find(".ui5-input-inner") + .realClick(); + + cy.get("@multiInput") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + // When accessibleName is present, it should be used as the mobile dialog title + cy.get("@multiInput") + .shadow() + .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") + .should("have.text", "Custom Title"); + }); + + it("Should test dialog title with accessibleNameRef is present and and n-more button of tokenizer is pressed", () => { + cy.mount( + <> + + + + + + + + + + + ); + + cy.get("[ui5-multi-input]") + .as("multiInput"); + + cy.get("@multiInput") + .shadow() + .find('.ui5-multi-input-tokenizer') + .as("tokenizer") + .shadow() + .find(".ui5-tokenizer-more-text") + .as("moreText") + .realClick(); + + cy.get("@tokenizer") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + // When accessibleNameRef is present, it should be used as the mobile dialog title + cy.get("@multiInput") + .shadow() + .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") + .should("have.text", "Custom Title"); + }); + + it("Should test dialog title with accessibleNameRef is present and input is focused", () => { + cy.mount( + <> + + + + + + + + + + + ); + + cy.get("[ui5-multi-input]") + .as("multiInput"); + + cy.get("@multiInput") + .shadow() + .find(".ui5-input-inner") + .realClick(); + + cy.get("@multiInput") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + // When accessibleNameRef is present, it should be used as the mobile dialog title + cy.get("@multiInput") + .shadow() + .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") + .should("have.text", "Custom Title"); + }); + }); }); diff --git a/packages/main/cypress/specs/Tokenizer.mobile.cy.tsx b/packages/main/cypress/specs/Tokenizer.mobile.cy.tsx index be7344dd308b..23a65bab0f7c 100644 --- a/packages/main/cypress/specs/Tokenizer.mobile.cy.tsx +++ b/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( @@ -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( + <> + + + + + + + ); + + cy.get("[ui5-tokenizer]") + .shadow() + .find(".ui5-tokenizer-more-text") + .as("nMoreLabel"); + + cy.get("@nMoreLabel") + .realClick(); + + cy.get("[ui5-tokenizer]") + .shadow() + .find("[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( + <> + + + + + + + + ); + + cy.get("[ui5-tokenizer]") + .shadow() + .find(".ui5-tokenizer-more-text") + .as("nMoreLabel"); + + cy.get("@nMoreLabel") + .realClick(); + + cy.get("[ui5-tokenizer]") + .shadow() + .find("[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"); + }); }) \ No newline at end of file diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index e3437e7b8aeb..27fc3b853c24 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -52,6 +52,7 @@ import { deregisterUI5Element, getEffectiveAriaDescriptionText, getAllAccessibleDescriptionRefTexts, + getEffectiveAriaLabelText, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import { getCaretPosition, setCaretPosition } from "@ui5/webcomponents-base/dist/util/Caret.js"; import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js"; @@ -1732,7 +1733,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement } get _headerTitleText() { - return Input.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); + return getEffectiveAriaLabelText(this) || Input.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); } get _suggestionsOkButtonText() { diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index adfd142ed14a..fe1aca931d82 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -2190,7 +2190,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement { } get _headerTitleText() { - return MultiComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); + return getEffectiveAriaLabelText(this) || MultiComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); } get _iconAccessibleNameText() { diff --git a/packages/main/src/MultiComboBoxPopoverTemplate.tsx b/packages/main/src/MultiComboBoxPopoverTemplate.tsx index af570b19acf2..aca650d6f810 100644 --- a/packages/main/src/MultiComboBoxPopoverTemplate.tsx +++ b/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"; export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) { return (<> @@ -34,7 +35,13 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) { {this._isPhone && <>
- {this._headerTitleText} + + {this._headerTitleText} +
{ this.tokens.map(token => )} diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts index 095904de05bd..ca260af2f424 100644 --- a/packages/main/src/Tokenizer.ts +++ b/packages/main/src/Tokenizer.ts @@ -61,7 +61,6 @@ 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, @@ -69,6 +68,7 @@ import { 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() { diff --git a/packages/main/src/features/InputSuggestionsTemplate.tsx b/packages/main/src/features/InputSuggestionsTemplate.tsx index 846500799446..b16bd7c69175 100644 --- a/packages/main/src/features/InputSuggestionsTemplate.tsx +++ b/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 <>
- {this._headerTitleText} + + {this._headerTitleText} +
@@ -75,7 +82,7 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
} - { this.showSuggestions && suggestionsList.call(this) } + {this.showSuggestions && suggestionsList.call(this)} {this._isPhone &&
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 47c006c191b9..610791883a79 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -309,8 +309,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 @@ -613,9 +613,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 diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css index 8edeabf2be06..6ae7ec843251 100644 --- a/packages/main/src/themes/ResponsivePopoverCommon.css +++ b/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 */ diff --git a/packages/main/test/pages/MultiInput.html b/packages/main/test/pages/MultiInput.html index 0a5e63eac68c..dc27190b602f 100644 --- a/packages/main/test/pages/MultiInput.html +++ b/packages/main/test/pages/MultiInput.html @@ -190,7 +190,7 @@

Multi Input - Error

Tokens

Multi Input without tokens

- +

@@ -200,7 +200,8 @@

Multi Input without tokens


Add multiple tokens

- + Acc Title Label +

@@ -230,7 +231,7 @@

Multi Input with 2 tokens


Multi Input with 5 tokens

- + @@ -276,8 +277,8 @@

Multi Input with N-More

Tokens + Suggestions

- - + MultiInput with suggestions + @@ -334,7 +335,7 @@

Composition

Suggestions + showing wrapping

- + diff --git a/packages/main/test/pages/Tokenizer.html b/packages/main/test/pages/Tokenizer.html index 69248d0db80f..2ad277d93df5 100644 --- a/packages/main/test/pages/Tokenizer.html +++ b/packages/main/test/pages/Tokenizer.html @@ -30,7 +30,8 @@

Expanded tokenizer

Only nItems tokenizer

- + Tokenizer with 2 items + Tokenizer with n-more items

Tokenizer with selected token

- + From d85901298d6732eef1f929b4b881f616562630db Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Wed, 4 Feb 2026 15:16:36 +0200 Subject: [PATCH 2/4] feat(ui5-tokenizer/ui5-multi-input/ui5-multi-combobox): align mobile popover title with spec --- .../cypress/specs/MultiComboBox.mobile.cy.tsx | 171 +---------------- .../cypress/specs/MultiInput.mobile.cy.tsx | 180 ------------------ packages/main/src/MultiComboBox.ts | 2 +- packages/main/src/MultiInputTemplate.tsx | 2 - packages/main/test/pages/MultiInput.html | 12 +- 5 files changed, 7 insertions(+), 360 deletions(-) diff --git a/packages/main/cypress/specs/MultiComboBox.mobile.cy.tsx b/packages/main/cypress/specs/MultiComboBox.mobile.cy.tsx index 8d477370b65d..67726bb4707d 100644 --- a/packages/main/cypress/specs/MultiComboBox.mobile.cy.tsx +++ b/packages/main/cypress/specs/MultiComboBox.mobile.cy.tsx @@ -1,5 +1,4 @@ -import { INPUT_SUGGESTIONS_TITLE, SHOW_SELECTED_BUTTON } from "../../src/generated/i18n/i18n-defaults.js"; -import Label from "../../src/Label.js"; +import { SHOW_SELECTED_BUTTON } 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"; @@ -875,172 +874,4 @@ describe("Accessibility", () => { .should("have.attr", "accessible-name", SHOW_SELECTED_BUTTON.defaultText); }); - - it("Should test dialog with default title", () => { - cy.mount( - - - - - - - ); - - cy.get("[ui5-multi-combobox]") - .as("multiComboBox"); - - cy.get("@multiComboBox") - .shadow() - .find("#ui5-multi-combobox-input") - .realClick(); - - cy.get("@multiComboBox") - .shadow() - .find("[ui5-responsive-popover]") - .as("popover") - .ui5ResponsivePopoverOpened(); - - cy.get("@multiComboBox") - .shadow() - .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") - .should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText); - }); - - it("Should test dialog title with accessibleName present and tokenizer n-more is pressed", () => { - cy.mount( - - - - - - - ); - - cy.get("[ui5-multi-combobox]") - .as("multiComboBox"); - - cy.get("@multiComboBox") - .shadow() - .find('.ui5-multi-combobox-tokenizer') - .as("tokenizer") - .shadow() - .find(".ui5-tokenizer-more-text") - .as("moreText") - .realClick(); - - cy.get("@multiComboBox") - .shadow() - .find("[ui5-responsive-popover]") - .as("popover") - .ui5ResponsivePopoverOpened(); - - // When accessibleName is present, it should be used as the mobile dialog title - cy.get("@multiComboBox") - .shadow() - .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") - .should("have.text", "Custom Title"); - }); - - it("Should test dialog title with accessibleName present and MultiComboBox is focused", () => { - cy.mount( - - - - - - - ); - - cy.get("[ui5-multi-combobox]") - .as("multiComboBox"); - - cy.get("@multiComboBox") - .shadow() - .find("#ui5-multi-combobox-input") - .realClick(); - - cy.get("@multiComboBox") - .shadow() - .find("[ui5-responsive-popover]") - .as("popover") - .ui5ResponsivePopoverOpened(); - - // When accessibleName is present, it should be used as the mobile dialog title - cy.get("@multiComboBox") - .shadow() - .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") - .should("have.text", "Custom Title"); - }); - - it("Should test dialog title with accessibleNameRef is present and tokenizer n-more is pressed", () => { - cy.mount( - <> - - - - - - - - - ); - - cy.get("[ui5-multi-combobox]") - .as("multiComboBox"); - - cy.get("@multiComboBox") - .shadow() - .find('.ui5-multi-combobox-tokenizer') - .as("tokenizer") - .shadow() - .find(".ui5-tokenizer-more-text") - .as("moreText") - .realClick(); - - cy.get("@multiComboBox") - .shadow() - .find("[ui5-responsive-popover]") - .as("popover") - .ui5ResponsivePopoverOpened(); - - // When accessibleNameRef is present, it should be used as the mobile dialog title - cy.get("@multiComboBox") - .shadow() - .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") - .should("have.text", "Custom Title"); - }); - - it("Should test dialog title with accessibleNameRef is present and MultiComboBox is focused", () => { - cy.mount( - <> - - - - - - - - - ); - - cy.get("[ui5-multi-combobox]") - .as("multiComboBox"); - - cy.get("@multiComboBox") - .shadow() - .find("#ui5-multi-combobox-input") - .realClick(); - - cy.get("@multiComboBox") - .shadow() - .find("[ui5-responsive-popover]") - .as("popover") - .ui5ResponsivePopoverOpened(); - - // When accessibleNameRef is present, it should be used as the mobile dialog title - cy.get("@multiComboBox") - .shadow() - .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") - .should("have.text", "Custom Title"); - }); }); \ No newline at end of file diff --git a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx index 766c6134dd59..800168d373be 100644 --- a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx +++ b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx @@ -214,184 +214,4 @@ describe("Multi Input on mobile device", () => { .should("have.length", 3); }); }); - - describe("Accessibility", () => { - it("Should test dialog with default title", () => { - cy.mount( - - - - - - - - - ); - - cy.get("[ui5-multi-input]") - .as("multiInput"); - - cy.get("@multiInput") - .shadow() - .find(".ui5-input-inner") - .realClick(); - - cy.get("@multiInput") - .shadow() - .find("[ui5-responsive-popover]") - .as("popover") - .ui5ResponsivePopoverOpened(); - - cy.get("@multiInput") - .shadow() - .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") - .should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText); - }); - - it("Should test dialog title with accessibleName is present and n-more button of tokenizer is pressed", () => { - cy.mount( - - - - - - - - - ); - - cy.get("[ui5-multi-input]") - .as("multiInput"); - - cy.get("@multiInput") - .shadow() - .find('.ui5-multi-input-tokenizer') - .as("tokenizer") - .shadow() - .find(".ui5-tokenizer-more-text") - .as("moreText") - .realClick(); - - cy.get("@tokenizer") - .shadow() - .find("[ui5-responsive-popover]") - .as("popover") - .ui5ResponsivePopoverOpened(); - - // When accessibleName is present, it should be used as the mobile dialog title - cy.get("@multiInput") - .shadow() - .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") - .should("have.text", "Custom Title"); - }); - - it("Should test dialog title with accessibleName is present and input is focused", () => { - cy.mount( - - - - - - - - - ); - - cy.get("[ui5-multi-input]") - .as("multiInput"); - - cy.get("@multiInput") - .shadow() - .find(".ui5-input-inner") - .realClick(); - - cy.get("@multiInput") - .shadow() - .find("[ui5-responsive-popover]") - .as("popover") - .ui5ResponsivePopoverOpened(); - - // When accessibleName is present, it should be used as the mobile dialog title - cy.get("@multiInput") - .shadow() - .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") - .should("have.text", "Custom Title"); - }); - - it("Should test dialog title with accessibleNameRef is present and and n-more button of tokenizer is pressed", () => { - cy.mount( - <> - - - - - - - - - - - ); - - cy.get("[ui5-multi-input]") - .as("multiInput"); - - cy.get("@multiInput") - .shadow() - .find('.ui5-multi-input-tokenizer') - .as("tokenizer") - .shadow() - .find(".ui5-tokenizer-more-text") - .as("moreText") - .realClick(); - - cy.get("@tokenizer") - .shadow() - .find("[ui5-responsive-popover]") - .as("popover") - .ui5ResponsivePopoverOpened(); - - // When accessibleNameRef is present, it should be used as the mobile dialog title - cy.get("@multiInput") - .shadow() - .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") - .should("have.text", "Custom Title"); - }); - - it("Should test dialog title with accessibleNameRef is present and input is focused", () => { - cy.mount( - <> - - - - - - - - - - - ); - - cy.get("[ui5-multi-input]") - .as("multiInput"); - - cy.get("@multiInput") - .shadow() - .find(".ui5-input-inner") - .realClick(); - - cy.get("@multiInput") - .shadow() - .find("[ui5-responsive-popover]") - .as("popover") - .ui5ResponsivePopoverOpened(); - - // When accessibleNameRef is present, it should be used as the mobile dialog title - cy.get("@multiInput") - .shadow() - .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") - .should("have.text", "Custom Title"); - }); - }); }); diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index fe1aca931d82..adfd142ed14a 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -2190,7 +2190,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement { } get _headerTitleText() { - return getEffectiveAriaLabelText(this) || MultiComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); + return MultiComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); } get _iconAccessibleNameText() { diff --git a/packages/main/src/MultiInputTemplate.tsx b/packages/main/src/MultiInputTemplate.tsx index 5d629640b0d7..03c214d7eb6d 100644 --- a/packages/main/src/MultiInputTemplate.tsx +++ b/packages/main/src/MultiInputTemplate.tsx @@ -38,8 +38,6 @@ function preContent(this: MultiInput) { onTokenDelete={this.tokenDelete} onFocusOut={this._tokenizerFocusOut} onShowMoreItemsPress={this._showMoreItemsPress} - accessibleName={this.accessibleName} - accessibleNameRef={this.accessibleNameRef} > { this.tokens.map(token => )} diff --git a/packages/main/test/pages/MultiInput.html b/packages/main/test/pages/MultiInput.html index dc27190b602f..80bcff883259 100644 --- a/packages/main/test/pages/MultiInput.html +++ b/packages/main/test/pages/MultiInput.html @@ -190,7 +190,7 @@

Multi Input - Error

Tokens

Multi Input without tokens

- +

@@ -200,8 +200,7 @@

Multi Input without tokens


Add multiple tokens

- Acc Title Label - +

@@ -231,7 +230,7 @@

Multi Input with 2 tokens


Multi Input with 5 tokens

- + @@ -277,8 +276,7 @@

Multi Input with N-More

Tokens + Suggestions

- MultiInput with suggestions - + @@ -335,7 +333,7 @@

Composition

Suggestions + showing wrapping

- + From a53a817ac5d48f893c0d2eaae6213485e571c119 Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Wed, 4 Feb 2026 15:20:54 +0200 Subject: [PATCH 3/4] feat(ui5-tokenizer/ui5-multi-input/ui5-multi-combobox): align mobile popover title with spec --- packages/main/cypress/specs/MultiInput.mobile.cy.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx index 800168d373be..4df8057ff5e9 100644 --- a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx +++ b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx @@ -4,8 +4,6 @@ import SuggestionItem from "../../src/SuggestionItem.js"; import Button from "../../src/Button.js"; import "../../src/features/InputSuggestions.js"; import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; -import { INPUT_SUGGESTIONS_TITLE } from "../../src/generated/i18n/i18n-defaults.js"; -import Label from "../../src/Label.js"; const createTokenFromText = (text: string): HTMLElement => { const token = document.createElement("ui5-token"); From 55569e8f82e1c69e7df5f4a21ff83fd88123e740 Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Wed, 4 Feb 2026 15:23:13 +0200 Subject: [PATCH 4/4] feat(ui5-tokenizer/ui5-multi-input/ui5-multi-combobox): align mobile popover title with spec --- packages/main/src/Input.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 357befa18666..75839f62714d 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -51,7 +51,6 @@ import { deregisterUI5Element, getEffectiveAriaDescriptionText, getAllAccessibleDescriptionRefTexts, - getEffectiveAriaLabelText, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import { getCaretPosition, setCaretPosition } from "@ui5/webcomponents-base/dist/util/Caret.js"; import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js"; @@ -1736,7 +1735,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement } get _headerTitleText() { - return getEffectiveAriaLabelText(this) || Input.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); + return Input.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); } get _suggestionsOkButtonText() {