Sortable list

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<p class="tui-muted" id="order-help">Space picks a plate up, the arrow keys move it,
  Space drops it, Escape puts it back.</p>
<ol class="tui-sortable" aria-label="Settings order">
  <li class="tui-sortable__item" data-id="billing">
    <button type="button" class="tui-sortable__grip"
            aria-label="Move Billing" aria-describedby="order-help"></button>
    <span class="tui-sortable__text">
      <span class="tui-sortable__title">Billing</span>
      <span class="tui-sortable__sub">Plans and invoices</span>
    </span>
    <span class="tui-sortable__pos" aria-hidden="true"></span>
    <span class="tui-lamp" data-lamp="amber" aria-hidden="true"></span>
  </li>
  …
</ol>

import '/kit/kit.mjs';   // wires every .tui-sortable on the page, now or later

document.querySelector('.tui-sortable').addEventListener('tui-reorder', (e) => {
  e.detail.from;    // where the plate was
  e.detail.to;      // where it is now
  e.detail.order;   // ['team', 'billing', 'security', …]: each data-id
  save(e.detail.order);
});

Needs kit.css and kit.mjs. How to install the kit.

• Each handle is a real button with a name (“Move Billing”) and a description that says how to use it. The plate itself is not a drag target, so a tap on its words does nothing surprising.
• The keyboard does everything a pointer does. Space picks up, the arrows move, Space drops, Escape puts it back; Home and End go to the ends.
• Each step is spoken in an assertive live region with the plate’s name and its place: “Picked up Billing. Position 2 of 5.”
• The handle keeps the focus and the pointer capture all the way, because the plates around it are the ones that move.
• A picked-up plate is shown by its lit lamp and its lifted shadow, and aria-pressed on its handle says it too.
• With reduced motion the others do not slide; they are in their new places at once, and the announcements are the same.

A tray cut into the plate with a rack of raised plates in it, each one a key’s cap laid flat. A 4px inset makes the handle’s 4px corner concentric with the plate’s 8px, and a 5px gap makes the tray’s 13px. The handle is a slot with vertical ridges cut across it, each a dark line and a lit one. Dragging moves the plate with a transform that follows the pointer; when its middle passes a neighbour’s, that neighbour is moved around it, which keeps the handle’s focus and capture, and every plate that moved is slid from where it was to where it is (a FLIP, with the Web Animations API). Dropping settles the plate from where the pointer left it. The order is the document’s: nothing is stored in script, and tui-reorder is how you find out.