Live Demo

Use the handle to drag items. Focus a handle and use ArrowUp, ArrowDown, Home, or End for keyboard movement.

Project tasks

Ready

Install the package Wire the adapter Ship accessible controls

Latest announcement

Reorder the live example to mirror the screen reader announcement here.

<drag-list aria-label="Project tasks">
  <drag-item value="install" label="Install the package">
    <drag-handle aria-label="Move Install the package"></drag-handle>
    <span>Install the package</span>
  </drag-item>
</drag-list>