fix(ui5-li): implement edit mode for keyboard navigation in list items#13411
Open
fix(ui5-li): implement edit mode for keyboard navigation in list items#13411
Conversation
Implements an edit mode for list items following the SAP Fiori Keyboard Interaction spec (Intentional Edit Pattern, p86-87): - **Navigation mode** (default): Tab/Shift+Tab forwards out of the list. Arrow keys navigate between items. - **Edit mode** (toggled by F2 or F7): Tab flows through inner focusable elements within an item, then continues to the next item's elements, and exits the list after the last item. Shift+Tab flows backward symmetrically. Arrow Up/Down transfers focus to the same-index element in adjacent items. The delete button in Delete selection mode is now keyboard accessible — reachable via edit mode Tab flow without requiring the Delete key shortcut. Fixes #13220
Collaborator
|
🚀 Deployed on https://pr-13411--ui5-webcomponents-preview.netlify.app |
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
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 following the SAP Fiori Keyboard Interaction spec (Intentional Edit Pattern, p86-87):
Tab/Shift+Tabforwards out of the list.Arrow Up/Downnavigates between items.F2orF7):Tabflows through inner focusable elements within an item, then continues to the next item's elements, and exits the list after the last item.Shift+Tabflows backward symmetrically.Arrow Up/Downtransfers focus to the same-index element in adjacent items.The delete button in
selectionMode="Delete"is now keyboard accessible — reachable via edit mode Tab flow without requiring theDeletekey shortcut.Changes
ListItem.ts_editModeprivate property to track edit/navigation mode state_handleTabNext— in edit mode, Tab flows to the next inner element or to the next item's first element viaforward-after; in navigation mode, always firesforward-after_handleTabPrevious— in edit mode, Shift+Tab flows backward or to the previous item's last element viaforward-before; in navigation mode, always firesforward-before_onfocusouthandler to clear edit mode when focus leaves the component_handleF2toggles edit mode on/offList.tsonForwardAfter: when the source item is in edit mode, routes focus to the next item's first inner element instead of exiting the listonForwardBefore: when the source item is in edit mode, routes focus to the previous item's last inner element instead of exiting the list_handleF7: sets_editModewhen entering/exiting internal elements_navigateToAdjacentItem: transfers_editModestate when arrow-navigating between itemsListItemBase.tsforward-beforeevent cancelable (consistent withforward-after)ListItemTemplate.tsxtabindex={-1}anddata-sap-no-tab-reffrom the delete button, making it discoverable bygetTabbableElementsList.cy.tsxListItemCustom+ custom delete button slotListEditMode.htmlTest plan
ListEditMode.htmltest pageFixes #13220