RhombusKit

Reorder List

A reorder list lets a user change the order of items — by dragging, by the up/down buttons, or entirely from the keyboard. RhombusKit's <rhombus-reorder-list> layers a full keyboard grab-mode and live-region announcements over @angular/cdk/drag-drop, because cdkDrag alone is invisible to assistive tech.

Example

Tab to a drag handle, press Space to pick an item up, use the arrow keys to move it, and Space again to drop.

  • 1. Apples
  • 2. Bananas
  • 3. Cherries
  • 4. Dates
Press space or enter on a drag handle to pick up an item, use the arrow keys or Home and End to move it, space or enter to drop, and escape to cancel.

When to use

  • When the order itself is the data — a playlist, a priority queue, dashboard widgets, form steps.
  • When users need a keyboard-accessible alternative to drag-and-drop.

When not to use

  • To navigate between destinations, use a Nav List.
  • To sort a grid by a column, use the Data Table sort headers.

Was this page helpful?