From ef1eaa460a77794c3503eddbe49e1ae8daa3be9e Mon Sep 17 00:00:00 2001 From: Konstantin Gogov Date: Fri, 24 Jul 2026 15:24:27 +0300 Subject: [PATCH] fix(ui5-list): suppress F2 aria description for custom items without tabbables Previously the "To move to the content, press F2" hint was announced for every ui5-li-custom, on the assumption that custom items may host arbitrary tabbable slot content. In the very common case where ui5-li-custom is used purely for visual richness (icon + description + additional text), the hint was misleading - F2 has nowhere to go, so pressing it does nothing. Replace the type-based check in _hasInteractiveItems with a behavioural call to _hasFocusableElements(), so the announcement matches what F2 actually does. Related to: #13489 Fixes: #13713 --- packages/main/cypress/specs/List.cy.tsx | 21 +++++++++++++++++++++ packages/main/src/List.ts | 8 +++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/main/cypress/specs/List.cy.tsx b/packages/main/cypress/specs/List.cy.tsx index 2afa8145fc195..42a3372fbc8d6 100644 --- a/packages/main/cypress/specs/List.cy.tsx +++ b/packages/main/cypress/specs/List.cy.tsx @@ -598,6 +598,27 @@ describe("List - Accessibility", () => { }); }); + it("does not announce F2 instruction for custom list items without tabbable content", () => { + cy.mount( + + Pineapple + Papaya + + ); + + 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 'Selected' when an item is selected in Single mode via mouse click", () => { cy.mount( diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index 8dd1180aece42..db0570d2c79d2 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -780,7 +780,13 @@ class List extends UI5Element { } return this.getItems().some(item => { - return item.getAttribute("type") === "Detail" || isInstanceOfListItemCustom(item); + if (item.getAttribute("type") === "Detail") { + return true; + } + if (isInstanceOfListItemCustom(item)) { + return item._hasFocusableElements(); + } + return false; }); }