diff --git a/packages/main/cypress/specs/List.cy.tsx b/packages/main/cypress/specs/List.cy.tsx index 0e3acd85315d..03297965deb5 100644 --- a/packages/main/cypress/specs/List.cy.tsx +++ b/packages/main/cypress/specs/List.cy.tsx @@ -457,6 +457,115 @@ describe("List - Accessibility", () => { }); }); }); + + it("announces 'Selected' when an item is selected in Single mode via mouse click", () => { + cy.mount( + + Argentina + Bulgaria + + ); + + cy.get(".ui5-invisiblemessage-polite").as("liveRegion"); + + cy.get("[ui5-list]").find("[ui5-li]").first().realClick(); + cy.get("@liveRegion").should("contain.text", "Selected"); + }); + + it("announces 'Selected' when an item is selected in Single mode via Space key", () => { + cy.mount( + + Argentina + Bulgaria + + ); + + cy.get(".ui5-invisiblemessage-polite").as("liveRegion"); + + cy.get("[ui5-list]").find("[ui5-li]").first().shadow().find("li").focus(); + cy.realPress("Space"); + cy.get("@liveRegion").should("contain.text", "Selected"); + + cy.get("[ui5-list]").find("[ui5-li]").eq(1).shadow().find("li").focus(); + cy.realPress("Space"); + cy.get("@liveRegion").should("contain.text", "Selected"); + }); + + it("announces 'Selected' and 'Not Selected' when items are toggled in Multiple mode via mouse click", () => { + cy.mount( + + Argentina + Bulgaria + + ); + + cy.get(".ui5-invisiblemessage-polite").as("liveRegion"); + + cy.get("[ui5-list]").find("[ui5-li]").first().realClick(); + cy.get("@liveRegion").should("contain.text", "Selected"); + + cy.get("[ui5-list]").find("[ui5-li]").first().realClick(); + cy.get("@liveRegion").should("contain.text", "Not Selected"); + }); + + it("announces 'Selected' and 'Not Selected' when items are toggled in Multiple mode via Space key", () => { + cy.mount( + + Argentina + Bulgaria + + ); + + cy.get(".ui5-invisiblemessage-polite").as("liveRegion"); + + cy.get("[ui5-list]").find("[ui5-li]").first().shadow().find("li").focus(); + cy.realPress("Space"); + cy.get("@liveRegion").should("contain.text", "Selected"); + + cy.realPress("Space"); + cy.get("@liveRegion").should("contain.text", "Not Selected"); + }); + + it("does not announce selection when selectionMode is None", () => { + cy.mount( + + Argentina + + ); + + cy.get(".ui5-invisiblemessage-polite").as("liveRegion").should("have.text", ""); + + cy.get("[ui5-list]").find("[ui5-li]").first().realClick(); + cy.get("@liveRegion").should("have.text", ""); + }); + + it("does not announce selection when selectionMode is Delete", () => { + cy.mount( + + Argentina + + ); + + cy.get(".ui5-invisiblemessage-polite").as("liveRegion").should("have.text", ""); + + cy.get("[ui5-list]").find("[ui5-li]").first().click(); + cy.realPress("Delete"); + cy.get("@liveRegion").should("have.text", ""); + }); + + it("does not announce selection when selection-change event is prevented", () => { + cy.mount( + e.preventDefault()}> + Argentina + Bulgaria + + ); + + cy.get(".ui5-invisiblemessage-polite").as("liveRegion").should("have.text", ""); + + cy.get("[ui5-list]").find("[ui5-li]").first().realClick(); + cy.get("@liveRegion").should("have.text", ""); + }); }); describe("List - Wrapping Behavior", () => { diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index 4ce0a29f3332..15b0ca86a9fd 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -38,6 +38,7 @@ import { getAllAccessibleNameRefTexts, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import getNormalizedTarget from "@ui5/webcomponents-base/dist/util/getNormalizedTarget.js"; +import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import debounce from "@ui5/webcomponents-base/dist/util/debounce.js"; import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js"; @@ -70,6 +71,8 @@ import { LOAD_MORE_TEXT, ARIA_LABEL_LIST_SELECTABLE, ARIA_LABEL_LIST_MULTISELECTABLE, ARIA_LABEL_LIST_DELETABLE, + LIST_ITEM_SELECTED, + LIST_ITEM_NOT_SELECTED, } from "./generated/i18n/i18n-defaults.js"; import type CheckBox from "./CheckBox.js"; import type RadioButton from "./RadioButton.js"; @@ -917,6 +920,12 @@ class List extends UI5Element { }); if (changePrevented) { this._revertSelection(previouslySelectedItems); + } else if (this.selectionMode !== ListSelectionMode.Delete) { + const item = e.detail.item; + const selectedText = item.selected + ? List.i18nBundle.getText(LIST_ITEM_SELECTED) + : List.i18nBundle.getText(LIST_ITEM_NOT_SELECTED); + announce(selectedText, "Polite"); } } }