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

Đã đóng
  • Có gì không ổn?
#14,135 2 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

@TeodorTaushanov đang làm issue này rồi.

Từ ngày 23/10/2026.

  • #14201 của @TeodorTaushanov — đang mở

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug Medium Prio TOPIC RD
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.
Ngôn ngữ chính
TypeScript
Star
1.8k
Fork
290
Merge trung bình
2 ngày 14 giờ
Pull request đã merge (30 ngày)
54

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của UI5/webcomponents

Tất cả issue của UI5/webcomponents

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.