Kanban
A board of columns whose cards move between columns by cross-container drag-and-drop — drag a card and drop it over another column — and by a per-card move button (the keyboard-accessible path). Each move is announced in a `role="status"` region, focus follows the card it moved, and Ctrl/Cmd+Z puts it back where it came from.
- Axe
- Focus
- Undo
- Drag
- Cancel
- Reorder
- Remove
Preview
To do
- Design
- Spec
Done
- Setup
Installation
npx shadcn@latest add https://ui.publictheta.com/r/kanban.jsonConformance
Verified against the @publictheta/ui-spec kanban specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.
- Axe — No WCAG 2 A/AA axe-core violations
- Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
- Undo — What it destroys or moves comes back: Cmd/Ctrl+Z takes the last change back and announces it, Cmd/Ctrl+Shift+Z does it again, and a run of like changes is one step
- Drag — Pointer-drag surfaces don't select text or hijack touch scrolling
- Cancel — Escape mid-drag (and pointercancel, when the OS takes the gesture) restores the value the drag started from and ends it, so the release commits nothing
- Reorder — An item can be moved somewhere else by pointer and by keyboard — Space/Enter grabs, the arrows move, Space/Enter drops, Escape puts it back — with an indicator showing where it would land and every step announced
- Remove — Delete takes it away and Ctrl/Cmd+Z puts it back where it was, announced — and focus lands on what takes its place rather than on the page body, where the undo could no longer be pressed
See the full conformance matrix across all components.