feat: add accessible drag&drop table component

assets/js/app.js

@@ -21,6 +21,7 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
+import Sortable from "../vendor/sortable"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 
@@ -120,6 +121,141 @@ Hooks.TabListKeydown = {
   }
 }
 
+// SortableList hook: Accessible reorderable table/list.
+// Mouse drag: SortableJS (smooth animation, ghost row, items push apart).
+// Keyboard: Space = grab/drop, Arrow up/down = move, Escape = cancel, matching the Salesforce a11y pattern.
+// Container must have data-reorder-event and data-list-id.
+// Each row (tr) must have data-row-index; locked rows have data-locked="true".
+// Pushes event with { from_index, to_index } (both integers) on reorder.
+Hooks.SortableList = {
+  mounted() {
+    this.reorderEvent = this.el.dataset.reorderEvent
+    this.listId = this.el.dataset.listId
+    // Keyboard state: store grabbed row id so it survives LiveView re-renders
+    this.grabbedRowId = null
+
+    this.announcementEl = this.listId ? document.getElementById(this.listId + "-announcement") : null
+    const announce = (msg) => {
+      if (!this.announcementEl) return
+      // Clear then re-set to force screen reader re-read
+      this.announcementEl.textContent = ""
+      setTimeout(() => { if (this.announcementEl) this.announcementEl.textContent = msg }, 50)
+    }
+
+    const tbody = this.el.querySelector("tbody")
+    if (!tbody) return
+
+    this.getRows = () => Array.from(tbody.querySelectorAll("tr"))
+    this.getRowIndex = (tr) => {
+      const idx = tr.getAttribute("data-row-index")
+      return idx != null ? parseInt(idx, 10) : -1
+    }
+    this.isLocked = (tr) => tr.getAttribute("data-locked") === "true"
+
+    // SortableJS for mouse drag-and-drop with animation
+    this.sortable = new Sortable(tbody, {
+      animation: 150,
+      handle: "[data-sortable-handle]",
+      // Disable sorting for locked rows (first row = email)
+      filter: "[data-locked='true']",
+      preventOnFilter: true,
+      // Ghost (placeholder showing where the item will land)
+      ghostClass: "sortable-ghost",
+      // The item being dragged
+      chosenClass: "sortable-chosen",
+      // Cursor while dragging
+      dragClass: "sortable-drag",
+      // Don't trigger on handle area clicks (only actual drag)
+      delay: 0,
+      onEnd: (e) => {
+        if (e.oldIndex === e.newIndex) return
+        this.pushEvent(this.reorderEvent, { from_index: e.oldIndex, to_index: e.newIndex })
+        announce(`Dropped. Position ${e.newIndex + 1} of ${this.getRows().length}.`)
+        // LiveView will reconcile the DOM order after re-render
+      }
+    })
+
+    // Keyboard handler (Salesforce a11y pattern: Space=grab/drop, Arrows=move, Escape=cancel)
+    this.handleKeyDown = (e) => {
+      // Don't intercept Space on interactive elements (checkboxes, buttons, inputs)
+      const tag = e.target.tagName
+      if (tag === "INPUT" || tag === "BUTTON" || tag === "SELECT" || tag === "TEXTAREA") return
+
+      const tr = e.target.closest("tr")
+      if (!tr || this.isLocked(tr)) return
+      const rows = this.getRows()
+      const idx = this.getRowIndex(tr)
+      if (idx < 0) return
+      const total = rows.length
+
+      if (e.key === " ") {
+        e.preventDefault()
+        const rowId = tr.id
+        if (this.grabbedRowId === rowId) {
+          // Drop
+          this.grabbedRowId = null
+          tr.style.outline = ""
+          announce(`Dropped. Position ${idx + 1} of ${total}.`)
+        } else {
+          // Grab
+          this.grabbedRowId = rowId
+          tr.style.outline = "2px solid var(--color-primary)"
+          tr.style.outlineOffset = "-2px"
+          announce(`Grabbed. Position ${idx + 1} of ${total}. Use arrow keys to move, Space to drop, Escape to cancel.`)
+        }
+        return
+      }
+
+      if (e.key === "Escape") {
+        if (this.grabbedRowId != null) {
+          e.preventDefault()
+          const grabbedTr = document.getElementById(this.grabbedRowId)
+          if (grabbedTr) { grabbedTr.style.outline = ""; grabbedTr.style.outlineOffset = "" }
+          this.grabbedRowId = null
+          announce("Reorder cancelled.")
+        }
+        return
+      }
+
+      if (this.grabbedRowId == null) return
+
+      if (e.key === "ArrowUp" && idx > 0) {
+        e.preventDefault()
+        this.pushEvent(this.reorderEvent, { from_index: idx, to_index: idx - 1 })
+        announce(`Position ${idx} of ${total}.`)
+      } else if (e.key === "ArrowDown" && idx < total - 1) {
+        e.preventDefault()
+        this.pushEvent(this.reorderEvent, { from_index: idx, to_index: idx + 1 })
+        announce(`Position ${idx + 2} of ${total}.`)
+      }
+    }
+
+    this.el.addEventListener("keydown", this.handleKeyDown, true)
+  },
+
+  updated() {
+    // Re-apply keyboard outline and restore focus after LiveView re-render.
+    // LiveView DOM patching loses focus; without explicit re-focus the next keypress
+    // goes to document.body (Space scrolls the page instead of triggering our handler).
+    if (this.grabbedRowId) {
+      const tr = document.getElementById(this.grabbedRowId)
+      if (tr) {
+        tr.style.outline = "2px solid var(--color-primary)"
+        tr.style.outlineOffset = "-2px"
+        tr.focus()
+      } else {
+        // Row no longer exists (removed while grabbed), clear state
+        this.grabbedRowId = null
+      }
+    }
+  },
+
+  destroyed() {
+    if (this.sortable) this.sortable.destroy()
+    this.el.removeEventListener("keydown", this.handleKeyDown, true)
+  }
+}
+
 // SidebarState hook: Manages sidebar expanded/collapsed state
 Hooks.SidebarState = {
   mounted() {