Skip to content

fix(ui5-li): implement edit mode for keyboard navigation in list items#13411

Open
kgogov wants to merge 1 commit intomainfrom
fix/list-item-delete-button
Open

fix(ui5-li): implement edit mode for keyboard navigation in list items#13411
kgogov wants to merge 1 commit intomainfrom
fix/list-item-delete-button

Conversation

@kgogov
Copy link
Copy Markdown
Contributor

@kgogov kgogov commented Apr 17, 2026

Summary

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 Up/Down navigates 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 selectionMode="Delete" is now keyboard accessible — reachable via edit mode Tab flow without requiring the Delete key shortcut.

Changes

ListItem.ts

  • Added _editMode private property to track edit/navigation mode state
  • Overridden _handleTabNext — in edit mode, Tab flows to the next inner element or to the next item's first element via forward-after; in navigation mode, always fires forward-after
  • Overridden _handleTabPrevious — in edit mode, Shift+Tab flows backward or to the previous item's last element via forward-before; in navigation mode, always fires forward-before
  • Added _onfocusout handler to clear edit mode when focus leaves the component
  • _handleF2 toggles edit mode on/off

List.ts

  • onForwardAfter: when the source item is in edit mode, routes focus to the next item's first inner element instead of exiting the list
  • onForwardBefore: 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 _editMode when entering/exiting internal elements
  • _navigateToAdjacentItem: transfers _editMode state when arrow-navigating between items

ListItemBase.ts

  • Made forward-before event cancelable (consistent with forward-after)

ListItemTemplate.tsx

  • Removed tabindex={-1} and data-sap-no-tab-ref from the delete button, making it discoverable by getTabbableElements

List.cy.tsx

  • Updated existing tests to reflect new Tab-forwarding behavior in navigation mode
  • Added 10 new tests covering: F2/F7 toggle, Tab flow across items, Tab exit from last item, Shift+Tab backward flow, Arrow key edit mode transfer, focus-out cleanup, mixed item types, and a comprehensive workflow with ListItemCustom + custom delete button slot

ListEditMode.html

  • New manual test page with 10 scenarios and a live focus tracker

Test plan

  • All 99 List Cypress tests pass (0 failures, 0 regressions)
  • NotificationList (fiori) — 31 tests pass
  • Table (compat) — 36 tests pass
  • Manual testing with ListEditMode.html test page
  • Screen reader testing (VoiceOver / NVDA)

Fixes #13220

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
@ui5-webcomponents-bot
Copy link
Copy Markdown
Collaborator

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.

[SF_ACC][List]: [UI5 WebComponents List - Keyboard Accessibility Issue with Delete Selection Mode]

2 participants