fix(ui5-list): suppress F2 aria description when no interactive items present#13489
fix(ui5-list): suppress F2 aria description when no interactive items present#13489NakataCode wants to merge 2 commits into
Conversation
|
🚀 Deployed on https://pr-13489--ui5-webcomponents-preview.netlify.app |
| } | ||
|
|
||
| return this.getItems().some(item => { | ||
| return item.getAttribute("type") === "Detail" || item.hasAttribute("ui5-li-custom"); |
There was a problem hiding this comment.
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:335 — setAttribute(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"> |
There was a problem hiding this comment.
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.
Problem
When the
ListhasselectionMode="None"and contains only plain standard items, the screen reader incorrectly announces "To move to the content, press F2" viaaria-descriptionon the<ul>element.This affects the Tokenizer in read-only mode, which sets
selectionMode="None"on its internalListin 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
_hasInteractiveItemsgetter that gates the F2 instruction, returningtrueonly when any of the following conditions are met:selectionModeisDelete— the custom delete button slot may be tabbabletype="Detail"— the detail button is tabbableListItemCustom— arbitrary tabbable slot contentImportant Note:
Fixes: #13347