Skip to content

[6.x] Use keyboard to reorder replicator sets - #15592

Merged
jackmcdade merged 27 commits into
6.xfrom
use-keyboard-to-reorder-replicator-sets
Oct 13, 2026
Merged

jackmcdade merged 27 commits into
6.xfrom
use-keyboard-to-reorder-replicator-sets

Conversation

@jaygeorge

Copy link
Copy Markdown
Contributor

Description of the Problem

2026-10-06.at.16.19.06.2.mp4

For power users/keyboard users and for accessibility:

Grid and Replicator items can be reordered by dragging, but there is no reliable keyboard path to do the same. That fails WCAG reorder expectations for keyboard and screen reader users (#15390).

What this PR Does

Adds keyboard reordering for Grid (table + stacked) and Replicator sets:

  • Start move from the drag handle (click / Space / Enter) or the ⋯ Move menu item
  • Use ↑ / ↓ to reorder; Enter or Escape to finish
  • Live region announces instructions and position; ↑↓ keycap hint shows while moving
  • Shared click-vs-drag threshold so handles stay clickable without fighting Sortable
  • Opt-in keyboard-reorder on the public DragHandle (existing consumers unchanged)
  • Visual cues: focus outline on sets/stacked panels; blue start edge on grid table rows while moving

Not in scope: Bard sets, navigation trees (those already use Alt+arrows via he-tree).

How to Reproduce

  1. Open an entry with a Replicator and a Grid (table and stacked if available), each with at least two reorderable items.
  2. Tab to a drag handle (or open ⋯ → Move).
  3. Press Space (or click the handle / choose Move) to enter move mode.
  4. Press ↑ / ↓ — the item should move, stay in view, and announce its position.
  5. Press Enter or Escape to exit move mode.
  6. Confirm a single-item list does not offer Move / keyboard-reorder, and that starting Move from the menu still works after previously using the handle.

… viewport so it doesn’t disappear off-screen.
Stop nested Grid/Replicator sessions fighting for keys, restore focus to the
moved row instead of a nested control, and only offer Move when reorder is
actually possible. Also keep consumer aria-labels on DragHandle.
…p handle and the ... menu

Keep move mode alive through dropdown focus teardown. After Escape, starting Move from the ⋯ menu could die immediately when
focus bounced through the document. Ignore outside focus/pointer briefly
after activating.
@jaygeorge

Copy link
Copy Markdown
Contributor Author

(Once this branch is merged I'll take a look at applying the same pattern to other areas like nav tree, Bard sets – don't want to double up prematurely!)

@jackmcdade

Copy link
Copy Markdown
Member

Jay, this is absolutely delightful to use. Thank you! I would definitely move forward on rolling this out elsewhere, starting with replacing the derpy Tree view interaction. It's kind of embarrassing how bad it was before. Sheesh. 😬

@jackmcdade
jackmcdade merged commit 4bbc81a into 6.x Oct 13, 2026
64 checks passed
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.

2 participants