diff --git a/packages/main/cypress/specs/Input.cy.tsx b/packages/main/cypress/specs/Input.cy.tsx
index 58ccbcbc19dd..6eb097a8a358 100644
--- a/packages/main/cypress/specs/Input.cy.tsx
+++ b/packages/main/cypress/specs/Input.cy.tsx
@@ -7,6 +7,7 @@ import Link from "../../src/Link.js";
import add from "@ui5/webcomponents-icons/dist/add.js";
import type ResponsivePopover from "../../src/ResponsivePopover.js";
+import { INPUT_SUGGESTIONS_EXPANDED, INPUT_SUGGESTIONS_COLLAPSED, INPUT_SUGGESTIONS_MORE_HITS } from "../../src/generated/i18n/i18n-defaults.js";
describe("Input Tests", () => {
it("test input event prevention", () => {
@@ -1364,6 +1365,71 @@ describe("Accessibility", () => {
});
});
+describe("Suggestions expanded/collapsed announcement", () => {
+ it("Should include 'Expanded' in suggestions count when popover opens", () => {
+ cy.mount(
+
+
+
+
+ );
+
+ cy.get("[ui5-input]")
+ .as("input")
+ .realClick();
+
+ cy.get("@input")
+ .shadow()
+ .find("input")
+ .realType("I");
+
+ cy.get("@input")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .ui5ResponsivePopoverOpened();
+
+ cy.get("@input")
+ .shadow()
+ .find("#suggestionsCount")
+ .should("contain.text", INPUT_SUGGESTIONS_EXPANDED.defaultText);
+ });
+
+ it("Should announce 'Collapsed' when suggestions popover closes", () => {
+ cy.mount(
+
+
+
+
+ );
+
+ cy.get("[ui5-input]")
+ .as("input")
+ .realClick();
+
+ cy.get("@input")
+ .shadow()
+ .find("input")
+ .realType("I");
+
+ cy.get("@input")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .ui5ResponsivePopoverOpened();
+
+ cy.realPress("Escape");
+
+ cy.get("@input")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .ui5ResponsivePopoverClosed();
+
+ cy.get("@input")
+ .shadow()
+ .find("#suggestionsCount")
+ .should("have.text", INPUT_SUGGESTIONS_COLLAPSED.defaultText);
+ });
+});
+
describe("Attribute propagation", () => {
it("Should change the placeholder of the inner input", () => {
const placeholder = "New placeholder text";
diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
index 4d750c91093f..ab36bd4b3e17 100644
--- a/packages/main/src/Input.ts
+++ b/packages/main/src/Input.ts
@@ -89,6 +89,8 @@ import {
INPUT_AVALIABLE_VALUES,
INPUT_SUGGESTIONS_OK_BUTTON,
INPUT_SUGGESTIONS_CANCEL_BUTTON,
+ INPUT_SUGGESTIONS_EXPANDED,
+ INPUT_SUGGESTIONS_COLLAPSED,
} from "./generated/i18n/i18n-defaults.js";
// Styles
@@ -1987,20 +1989,21 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
get availableSuggestionsCount() {
if (this.showSuggestions && (this.value || this.Suggestions?.isOpened())) {
const nonGroupItems = this._selectableItems;
+ const expandedText = Input.i18nBundle.getText(INPUT_SUGGESTIONS_EXPANDED);
switch (nonGroupItems.length) {
case 0:
- return Input.i18nBundle.getText(INPUT_SUGGESTIONS_NO_HIT);
+ return `${Input.i18nBundle.getText(INPUT_SUGGESTIONS_NO_HIT)} ${expandedText}`;
case 1:
- return Input.i18nBundle.getText(INPUT_SUGGESTIONS_ONE_HIT);
+ return `${Input.i18nBundle.getText(INPUT_SUGGESTIONS_ONE_HIT)} ${expandedText}`;
default:
- return Input.i18nBundle.getText(INPUT_SUGGESTIONS_MORE_HITS, nonGroupItems.length);
+ return `${Input.i18nBundle.getText(INPUT_SUGGESTIONS_MORE_HITS, nonGroupItems.length)} ${expandedText}`;
}
}
- return undefined;
+ return this.showSuggestions ? Input.i18nBundle.getText(INPUT_SUGGESTIONS_COLLAPSED) : undefined;
}
get step() {
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index 84425a6a3b5e..c29091cdf566 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -342,6 +342,12 @@ INPUT_SUGGESTIONS_MORE_HITS={0} results are available
#XACT: ARIA announcement for the Input suggestion result if no hit
INPUT_SUGGESTIONS_NO_HIT=No results
+#XACT: ARIA announcement when suggestions popover is expanded
+INPUT_SUGGESTIONS_EXPANDED=Expanded
+
+#XACT: ARIA announcement when suggestions popover is collapsed
+INPUT_SUGGESTIONS_COLLAPSED=Collapsed
+
#XACT: ARIA label for the Input clear icon
INPUT_CLEAR_ICON_ACC_NAME=Clear