fix(ui5-li): implement edit mode for keyboard navigation in list items#13273
Draft
fix(ui5-li): implement edit mode for keyboard navigation in list items#13273
Conversation
…on mode The delete button was intentionally removed from the tab chain in 2021 (commit 5176954, PR #3290) based on accessibility guidance at the time. This decision has since been reconsidered — UX now requires the button to be keyboard accessible, as the Delete key shortcut alone is not intuitive for most users. Removed tabindex="-1" and data-sap-no-tab-ref from the delete button, making it consistent with the detail button. Tab, Shift+Tab, and F2 now reach the delete button within list items. Fixes #13220 Relates to #2964
Collaborator
|
🚀 Deployed on https://pr-13273--ui5-webcomponents-preview.netlify.app |
Introduce an edit mode (toggled by F2/F7) that controls Tab behavior within list items. In navigation mode (default), Tab/Shift+Tab always forwards to the next/previous item. In edit mode, Tab cycles through internal focusable elements. This ensures consistent keyboard behavior across ListItemStandard, ListItemCustom, and all selection modes. Arrow Up/Down in edit mode transfers focus to the same-index element in adjacent items. Fixes #13220
kgogov
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements an edit mode for list items that controls Tab behavior, following the SAP Fiori Keyboard Interaction spec (List View Interaction Patterns):
Tab/Shift+Tabalways forwards to the next/previous item. Arrow keys navigate between items.F2orF7):Tabcycles through internal focusable elements (buttons, links, inputs, delete button).Arrow Up/Downtransfers edit mode to adjacent items, focusing the same-index element.Changes
ListItem.ts_editModeprivate property to track edit/navigation mode state_handleTabNext/_handleTabPrevious— in navigation mode, always fireforward-after/forward-before; in edit mode, cycle through internal focusable elements_onfocusouthandler to clear edit mode when focus leaves the componentListItemTemplate.tsxtabindex={-1}anddata-sap-no-tab-reffrom the delete button, making it discoverable bygetTabbableElementsand reachable via edit modeList.ts_handleF7: F7 now sets_editMode = truewhen entering internal elements (consistent with F2)_navigateToAdjacentItem: Transfers_editModestate when arrow-navigating between itemsList.cy.tsxListEditMode.htmlTest plan
ListEditMode.htmltest page covering:Fixes #13220
Relates to #2964