fix(ui5-multi-input): selected item is announced correctly

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

@@ -8,7 +8,7 @@ import ResponsivePopover from "../../src/ResponsivePopover.js";
 import SuggestionItemCustom from "../../src/SuggestionItemCustom.js";
 import { MULTIINPUT_VALUE_HELP } from "../../src/generated/i18n/i18n-defaults.js";
 import { TOKENIZER_SHOW_ALL_ITEMS } from "../../src/generated/i18n/i18n-defaults.js";
-import { MULTIINPUT_SHOW_MORE_TOKENS } from "../../src/generated/i18n/i18n-defaults.js";
+import { MULTIINPUT_SHOW_MORE_TOKENS, LIST_ITEM_POSITION } from "../../src/generated/i18n/i18n-defaults.js";
 
 const createTokenFromText = (text: string): HTMLElement => {
 	const token = document.createElement("ui5-token");
@@ -920,6 +920,52 @@ describe("ARIA attributes", () => {
 			.find("input")
 			.should("have.attr", "aria-haspopup", "dialog");
 	});
+
+	it.only("announces correct suggestion position when selecting a suggestion with Enter", () => {
+		cy.mount(
+			<MultiInput show-suggestions id="suggestion-token">
+				<SuggestionItem text="Aute"></SuggestionItem>
+				<SuggestionItem text="ad"></SuggestionItem>
+				<SuggestionItem text="exercitation"></SuggestionItem>
+			</MultiInput>
+		);
+
+		cy.get("[ui5-multi-input]")
+			.then(multiInput => {
+				multiInput[0].addEventListener("keydown", (event: KeyboardEvent) => {
+					const inputElement = multiInput[0] as HTMLInputElement;
+					if (event.key === "Enter" && inputElement.value) {
+						const token = createTokenFromText(inputElement.value);
+						inputElement.appendChild(token);
+						inputElement.value = "";
+					}
+				});
+			})
+
+		cy.get("[ui5-multi-input]")
+			.realClick();
+
+			cy.realType("a");
+			cy.realPress("ArrowDown");
+
+		cy.get("[ui5-multi-input]")
+			.then(($mi) => {
+				const i18nBundle = ($mi[0].constructor as any).i18nBundle;
+				const miSelectionText = i18nBundle.getText(LIST_ITEM_POSITION.defaultText, 2, 3);
+
+				cy.get("[ui5-multi-input]")
+					.shadow()
+					.find("#selectionText")
+					.as("selectionText")
+					.should("have.text", `${miSelectionText}`);
+		});
+
+		cy.realPress("Enter");
+
+		cy.get("@selectionText")
+			.should("have.text", "");
+
+	});
 })
 
 describe("Keyboard handling", () => {

packages/main/src/Input.ts

@@ -1383,8 +1383,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	}
 
 	_afterClosePicker() {
-		this.announceSelectedItem();
-
 		// close device's keyboard and prevent further typing
 		if (isPhone()) {
 			this.blur();
@@ -1405,6 +1403,12 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		if (this.hasSuggestionItemSelected) {
 			this.focus();
 		}
+
+		const invisibleText = this.shadowRoot!.querySelector(`#selectionText`);
+		if (invisibleText) {
+			invisibleText.textContent = "";
+		}
+
 		this._handlePickerAfterClose();
 	}
 

packages/main/src/features/InputSuggestions.ts

@@ -472,7 +472,7 @@ class Suggestions {
 
 		const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION, this.accInfo.currentPos || 0, this.accInfo.listSize || 0);
 
-		return `${this.accInfo.additionalText} ${itemPositionText}`;
+		return `${this.accInfo.additionalText} ${itemPositionText}`.trim();
 	}
 
 	hightlightInput(text: string, input: string) {