Keyboard Reorderable List

<!--
  Reordering without drag-and-drop: two 40px buttons per row move an item up or
  down. This is the accessible baseline drag libraries forget - it works with a
  keyboard, a switch and a screen reader. End rows disable the button that would
  do nothing. An aria-live region announces each move; the label takes min-w-0 +
  truncate so the controls never get pushed off a 320px row.
-->
<ul class="w-full divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white dark:divide-gray-800 dark:border-gray-800 dark:bg-gray-900" aria-label="Reorderable list">
  <li class="flex items-center gap-2 px-3 py-2">
    <span class="min-w-0 flex-1 truncate text-sm text-gray-900 dark:text-gray-100">First priority task</span>
    <button type="button" disabled class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400" aria-label="Move First priority task up">
      <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5" aria-hidden="true"><path fill-rule="evenodd" d="M10 5a.75.75 0 0 1 .55.24l4.25 4.5a.75.75 0 1 1-1.1 1.02L10 6.85l-3.7 3.91a.75.75 0 1 1-1.1-1.02l4.25-4.5A.75.75 0 0 1 10 5Z" clip-rule="evenodd"/></svg>
    </button>
    <button type="button" class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400" aria-label="Move First priority task down">
      <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5" aria-hidden="true"><path fill-rule="evenodd" d="M10 15a.75.75 0 0 1-.55-.24l-4.25-4.5a.75.75 0 1 1 1.1-1.02L10 13.15l3.7-3.91a.75.75 0 1 1 1.1 1.02l-4.25 4.5A.75.75 0 0 1 10 15Z" clip-rule="evenodd"/></svg>
    </button>
  </li>
</ul>