Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#14,135 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
typescript
Domain
accessibility, frontend

Research direction

Start in TableDragAndDrop, which handles reordering only through the HTML5 drag handlers (_ondragstart, _ondragover, _ondrop, _ondragend), and in TableRow, where _onkeydown currently handles only Enter via the Keys.js helper isEnter. Reproduce with the ui5-table example from the issue: Tab to a movable row and try the arrow and Enter keys, and confirm that no move or move-over event fires. Done means a keyboard user can grab, move and drop or cancel a movable row, with the interaction design agreed in the thread first.

Written by the indexing model from the issue text.

Description

bug
Bug Description

ui5-table supports drag-and-drop row reordering: rows marked movable emit move / move-over events (added in #9955). This works with a pointing device, but there is no keyboard-operable path to reorder a row. A keyboard-only user cannot grab a focused row and move it, so any reordering built on ui5-table movable rows fails WCAG 2.1.1 Keyboard (Level A).

Isolated example / steps to reproduce

Self-contained repro (loads UI5 2.26.0 from a CDN): a ui5-table with four movable rows and move / move-over handlers performing the reorder.

<ui5-table id="tbl">
  <ui5-table-header-row slot="headerRow">
    <ui5-table-header-cell>Name</ui5-table-header-cell>
  </ui5-table-header-row>
  <ui5-table-row movable row-key="1"><ui5-table-cell>Alpha</ui5-table-cell></ui5-table-row>
  <ui5-table-row movable row-key="2"><ui5-table-cell>Bravo</ui5-table-cell></ui5-table-row>
  <ui5-table-row movable row-key="3"><ui5-table-cell>Charlie</ui5-table-cell></ui5-table-row>
  <ui5-table-row movable row-key="4"><ui5-table-cell>Delta</ui5-table-cell></ui5-table-row>
</ui5-table>
const tbl = document.getElementById('tbl');
// preventDefault() in move-over marks a valid drop target (otherwise `move` never fires)
tbl.addEventListener('move-over', (e) => {
  if (e.detail.destination.placement !== 'On') e.preventDefault();
});
tbl.addEventListener('move', (e) => {
  const { source, destination } = e.detail;
  destination.element.insertAdjacentElement(
    destination.placement === 'Before' ? 'beforebegin' : 'afterend',
    source.element
  );
});

Steps:

  1. Mouse (works): drag a row onto another → move fires and the order changes.
  2. Keyboard (does not work): Tab to focus a row, then try Enter, Space, ↑/↓, Ctrl+↑/↓, Ctrl+Shift+↑/↓. No move / move-over event fires and the order never changes. There is no affordance to grab a movable row from the keyboard.
Affected Component

No response

Expected Behaviour

A keyboard-only user should be able to grab a focused movable row and reposition it — e.g. an announced "grabbed" state, arrow keys to move, Enter/Space to drop, Escape to cancel — so reordering is fully keyboard-operable.

Note there is existing in-house precedent for this interaction: sap.f.dnd.GridKeyboardDragAndDrop in OpenUI5 provides Ctrl+arrow keyboard reordering (since 1.81). The same pattern isn't available for the web-components Table.

Root cause (from source, v2.26.0)

  • TableDragAndDrop wires reordering only to HTML5 drag events (_ondragstart, _ondragover, _ondrop, _ondragend); no keydown handling.
  • TableRow sets draggable from movable (toggleAttribute(this, "draggable", this.movable, "true")); its _onkeydown only handles Enter (the sole key helper imported from Keys.js is isEnter). There is no arrow-key grab/move interaction.
Isolated Example

https://stackblitz.com/edit/vitejs-vite-k4nhabtb

Steps to Reproduce
  1. Mouse (works): drag a row onto another → a move event fires and the order changes.
  2. Keyboard (does not work): press Tab until a row is focused, then try Enter, Space, ↑/↓, Ctrl+↑/↓, and Ctrl+Shift+↑/↓. No move / move-over event fires and the row order never changes. There is no affordance to grab a movable row from the keyboard.
Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2.26.0

Browser

Chrome

Operating System

macOS

Additional Context

No response

Organization

SAP LeanIX

Declaration
  • I’m not disclosing any internal or sensitive information.
Dominant language
TypeScript
Stars
1.8k
Forks
288
Avg merge
2d 15h
Merged PRs (30d)
45

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from UI5/webcomponents

All issues in UI5/webcomponents

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.