Skip to content

fix(ui5-list): suppress F2 aria description when no interactive items present#13489

Open
NakataCode wants to merge 2 commits into
mainfrom
ui5-list-f2-aria-description
Open

fix(ui5-list): suppress F2 aria description when no interactive items present#13489
NakataCode wants to merge 2 commits into
mainfrom
ui5-list-f2-aria-description

Conversation

@NakataCode
Copy link
Copy Markdown
Contributor

@NakataCode NakataCode commented May 8, 2026

Problem

When the List has selectionMode="None" and contains only plain standard items, the screen reader incorrectly announces "To move to the content, press F2" via aria-description on the <ul> element.

This affects the Tokenizer in read-only mode, which sets selectionMode="None" on its internal List in the n-more popover, causing the misleading instruction to be announced even though there are no interactive elements to reach with F2.


Solution

Introduce a _hasInteractiveItems getter that gates the F2 instruction, returning true only when any of the following conditions are met:

  • selectionMode is Delete — the custom delete button slot may be tabbable
  • Any item has type="Detail" — the detail button is tabbable
  • Any item is a ListItemCustom — arbitrary tabbable slot content

Important Note:

  • The F2 aria-description is now only announced when the list actually contains interactive elements that can be reached with F2. Previously it was announced on every list regardless of content.

Fixes: #13347

@NakataCode NakataCode requested a review from dobrinyonkov May 8, 2026 13:13
@ui5-webcomponents-bot
Copy link
Copy Markdown
Collaborator

ui5-webcomponents-bot commented May 8, 2026

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 8, 2026 13:15 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 8, 2026 15:36 Inactive
Comment thread packages/main/src/List.ts
}

return this.getItems().some(item => {
return item.getAttribute("type") === "Detail" || item.hasAttribute("ui5-li-custom");
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

item.hasAttribute("ui5-li-custom") only matches the literal <ui5-li-custom> tag. The [ui5-li-custom] marker attribute is set by UI5Element from the component's own tag (see packages/base/src/UI5Element.ts:335setAttribute(getPureTag(), "")), so a subclass like class MySpecialItem extends ListItemCustom registered as <my-special-item> will carry [my-special-item] but not [ui5-li-custom]. Consumers extending ListItemCustom will lose the F2 announcement on this PR.

Per packages/base/AGENTS.md ("No instanceof Checks"), the project's idiom for subclass-safe identity is createInstanceChecker with a duck-typing marker — already used by MenuItem, MenuItemGroup, MultiComboBoxItemGroup, etc.

Suggested approach:

// In ListItemCustom.ts
class ListItemCustom extends ListItemBase {
    readonly isCustomListItem = true;
}
export const isInstanceOfListItemCustom = createInstanceChecker<ListItemCustom>("isCustomListItem");
// In List.ts
import { isInstanceOfListItemCustom } from "./ListItemCustom.js";

get _hasInteractiveItems() {
    if (this.selectionMode === ListSelectionMode.Delete) {
        return true;
    }
    return this.getItems().some(item => {
        return item.type === "Detail" || isInstanceOfListItemCustom(item);
    });
}

Note: getAttribute("type") itself is fine — UI5Element reflects property writes back to the attribute (UI5Element.ts:729-734). But reading item.type directly is cleaner and matches the surrounding style.

it("has default aria-description for accessibleRole List when no accessibleDescription is set", () => {
cy.mount(
<List>
<List selectionMode="Delete">
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Worth calling out in the PR description / release notes: this change silently removes the F2 aria-description from any default <ui5-list> (no selectionMode, plain standard items). That's the intended fix, but consumers who relied on that announcement on a default list will lose it without a deprecation path. The test edit here is the visible signal of that behavior change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Tokenizer]: Incorrect F2 instruction announced in read-only mode for tokenizer

3 participants