diff --git a/packages/main/cypress/specs/List.cy.tsx b/packages/main/cypress/specs/List.cy.tsx index 0e3acd85315d..4a3df3d1ed45 100644 --- a/packages/main/cypress/specs/List.cy.tsx +++ b/packages/main/cypress/specs/List.cy.tsx @@ -378,7 +378,7 @@ describe("List - Accessibility", () => { it("has default aria-description for accessibleRole List when no accessibleDescription is set", () => { cy.mount( - + Item 1 Item 2 @@ -413,7 +413,7 @@ describe("List - Accessibility", () => { const customDescription = "Custom list description"; cy.mount( - + Item 1 Item 2 @@ -457,6 +457,91 @@ describe("List - Accessibility", () => { }); }); }); + + it("does not announce F2 instruction for selectionMode None with standard items", () => { + cy.mount( + + Item 1 + Item 2 + + ); + + cy.get("[ui5-list]") + .shadow() + .find(".ui5-list-ul") + .invoke("attr", "aria-description") + .then((ariaDesc) => { + cy.get("[ui5-list]") + .should(($list) => { + const defaultText = $list.prop("defaultAriaDescriptionText") as string; + expect(ariaDesc ?? "").to.not.include(defaultText); + }); + }); + }); + + it("announces F2 instruction for selectionMode Delete", () => { + cy.mount( + + Item 1 + Item 2 + + ); + + cy.get("[ui5-list]") + .shadow() + .find(".ui5-list-ul") + .invoke("attr", "aria-description") + .then((ariaDesc) => { + cy.get("[ui5-list]") + .should(($list) => { + const defaultText = $list.prop("defaultAriaDescriptionText") as string; + expect(ariaDesc).to.include(defaultText); + }); + }); + }); + + it("announces F2 instruction for selectionMode None with type Detail items", () => { + cy.mount( + + Item 1 + Item 2 + + ); + + cy.get("[ui5-list]") + .shadow() + .find(".ui5-list-ul") + .invoke("attr", "aria-description") + .then((ariaDesc) => { + cy.get("[ui5-list]") + .should(($list) => { + const defaultText = $list.prop("defaultAriaDescriptionText") as string; + expect(ariaDesc).to.include(defaultText); + }); + }); + }); + + it("announces F2 instruction for selectionMode None with custom list items", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-list]") + .shadow() + .find(".ui5-list-ul") + .invoke("attr", "aria-description") + .then((ariaDesc) => { + cy.get("[ui5-list]") + .should(($list) => { + const defaultText = $list.prop("defaultAriaDescriptionText") as string; + expect(ariaDesc).to.include(defaultText); + }); + }); + }); }); describe("List - Wrapping Behavior", () => { diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index 4ce0a29f3332..9216409e8a4e 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -742,7 +742,7 @@ class List extends UI5Element { get ariaDescriptionText() { const parts = []; - if (this.accessibleRole === ListAccessibleRole.List) { + if (this.accessibleRole === ListAccessibleRole.List && this._hasInteractiveItems) { parts.push(this.defaultAriaDescriptionText); } const externalDescription = this._associatedDescriptionRefTexts || getEffectiveAriaDescriptionText(this); @@ -763,6 +763,16 @@ class List extends UI5Element { return List.i18nBundle.getText(LIST_ROLE_DESCRIPTION); } + get _hasInteractiveItems() { + if (this.selectionMode === ListSelectionMode.Delete) { + return true; + } + + return this.getItems().some(item => { + return item.getAttribute("type") === "Detail" || item.hasAttribute("ui5-li-custom"); + }); + } + get growingButtonAriaLabel() { return this.accessibilityAttributes.growingButton?.name; }