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