Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#14,135 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
accessibility, frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug Medium Prio TOPIC TBL
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.
Lingua principale
TypeScript
Stelle
1.8k
Fork
288
Merge medio
4g 4h
PR unite (30g)
56

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di UI5/webcomponents

Tutte le issue di UI5/webcomponents

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.