Skip to content

fix(ui5-table): add keyboard drag and drop support - #14201

Open
TeodorTaushanov wants to merge 1 commit into
mainfrom
table_dnd
Open

TeodorTaushanov wants to merge 1 commit into
mainfrom
table_dnd

Conversation

@TeodorTaushanov

@TeodorTaushanov TeodorTaushanov commented Oct 23, 2026 •

Copy link
Copy Markdown
Member

Table rows could only be reordered with the mouse, while List already supports reordering movable items with the keyboard. This adds the same keyboard support to the Table.

Pressing Ctrl + Arrow moves a movable row one position; Ctrl + Home/End moves it to the top/bottom. The handler reuses the shared findClosestPositionsByKey utility and fires the existing move-over/move events, mirroring List and TabContainer.

fixes #14135

Table rows could only be reordered with the mouse, while List already
supports reordering movable items with the keyboard. This adds the same
keyboard support to the Table.

Pressing Ctrl + Arrow moves a movable row one position; Ctrl + Home/End
moves it to the top/bottom. The handler reuses the shared
findClosestPositionsByKey utility and fires the existing move-over/move
events, mirroring List and TabContainer.
@TeodorTaushanov
TeodorTaushanov deployed to netlify-preview October 23, 2026 13:08 — with GitHub Actions Active
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

@TeodorTaushanov TeodorTaushanov changed the title wip(ui5-table): add keyboard drag and drop support fix(ui5-table): add keyboard drag and drop support Oct 23, 2026
@aborjinik

aborjinik commented Oct 28, 2026 •

Copy link
Copy Markdown
Contributor

... while List already supports reordering movable items with the keyboard. This adds the same keyboard support to the Table.

The handler reuses the shared findClosestPositionsByKey utility and fires the existing move-over/move events, mirroring List and TabContainer.

Aren't these statements an explicit admission that we lack a proper reuse layer?

Ideally, reordering (and many of the already existing d&d implementation) should be implemented in a shared layer so that List, Table, and other applicable controls can reuse the same behavior, including keyboard interactions, drag-and-drop, and move events. Otherwise, every new feature or bug fix must be implemented and maintained separately for each control, leading to duplication and behavioral inconsistencies over time.

@aborjinik

aborjinik commented Oct 29, 2026 •

Copy link
Copy Markdown
Contributor

While looking at the core d&d implementation, I noticed that component d&d logic is needed seemingly because of the dropIndicatorDOM dependency. IMHO you should reconsider this separation. Since a user can only perform one drag operation at a time, the drop indicator could potentially be managed by a single shared instance rather than being owned by individual components.
This would allow you to centralize the drag-and-drop logic in the core implementation, eliminate unnecessary duplication, and decouple the consuming components from the rendering lifecycle of the drop indicator (though components might still need to set the orientation/placement/ownerReference but probably drag events are fine for it).

@dimovpetar

Copy link
Copy Markdown
Member

@aborjinik I have opened #14238 to tackle this.
Otherwise, this PR looks good to me.

This branch was successfully deployed

1 active deployment
netlify-preview — ebd65634 Deployed Oct 23, 2026 by TeodorTaushanov via deploy-preview #3562
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.

[ui5-table] movable rows cannot be reordered with the keyboard (WCAG 2.1.1)

3 participants