# Task Board

> A sprint-timetable task board with accessible drag-and-drop — flat square schedule blocks with date-span tracks, a now-line sprint axis, pointer dragging with a hatched drop slot, full keyboard moves with screen-reader announcements, and column actions — light-first, token-driven, borderless.

- Category: Drag & Drop
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Prism
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: timeline
- Page: https://builder.atheros.ai/components/task-board
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_task_board/preview-3a50fbe8873c.webp

## Features

- Printed-timetable identity: paper canvas, ink masthead rule, Archivo grotesque headings, and JetBrains Mono for every date, count, and duration in tabular numerals
- Zero border-radius everywhere — cards, lanes, chips, buttons, and avatars are all square, in the swiss-print tradition
- Borderless structure: lanes are toned wells on a white sheet, task cards are flat white slabs — separation comes from whitespace and background-tone shifts, with only a masthead rule, lane rules, and one footer hairline drawn
- Sprint axis under the header: a day-ticked rail with an ink done-fill (scaleX-animated) and a red now-line tick computed from the sprint dates in `js/data.js`
- Every task renders as a scheduled block: mono date range on top, a colored span track showing where the block sits inside the sprint window, and a mono duration label
- Priority reads as a square-tick mono label plus the colored span-track fill — no pills, no filled badges, no card-edge bars
- Pointer drag-and-drop between four lanes with a hatched drop-slot placeholder that previews the drop position live — dragging a block reads as rescheduling it
- Lane highlight on dragover using a dragenter/dragleave counter so nested children never cause flicker
- Full keyboard drag-and-drop: Space/Enter picks a block up, arrow keys move it between positions and lanes, Space/Enter drops, Escape cancels and restores the original position
- Every pickup, move, drop, and cancel announced through a visually hidden `aria-live="assertive"` region
- Drop settle bounce animation and staggered lane entrance, both disabled under reduced motion
- Per-lane actions menu: sort by priority, highlight/unhighlight the lane, move all tasks to Done, lock/unlock the lane against moves
- Fixed-height lanes with independently scrolling task lists, so the board keeps its shape as blocks pile up
- Photo avatars (external images) with an automatic initials fallback on load error, overlapping in the board footer
- Live task counts per lane and a board footer with team avatars and total task count
- Tasks moved into Done automatically swap their priority tick for a filled check square
- Single delegated listener set on the board — no per-card listeners, no leaks across re-renders
- Responsive: 4 lanes on desktop, 2 on tablet, 1 below 600px

## Accessibility

- **Keyboard drag-and-drop** — Space/Enter grabs, arrows move, Space/Enter drops, Escape cancels
- **Live announcements** — Visually hidden `aria-live="assertive"` region announces pickup, move, drop, cancel
- **Card instructions** — Every block has `aria-describedby` pointing to hidden usage instructions
- **Column structure** — Lanes are `<section>` with `aria-labelledby` headings and labeled task lists
- **Column counts** — Count values carry `aria-label` with the spoken task count
- **Column menus** — Menu buttons expose `aria-haspopup`/`aria-expanded`, items use `role="menuitem"`
- **Sprint axis** — The axis rail is `role="img"` with a live-updated done-count label; decorative ticks are `aria-hidden`
- **Focus indicators** — `:focus-visible` with a 2px `--tl-accent` outline on all interactive elements
- **Focus management** — Focus restored to the moved block (or menu button) after every re-render
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `Space / Enter` — Pick up the focused block, or drop a grabbed block
- `Arrow Up / Arrow Down` — Move a grabbed block within its lane
- `Arrow Left / Arrow Right` — Move a grabbed block to the adjacent lane
- `Escape` — Cancel a grab and return the block, or close an open lane menu

## Common questions

**Which frameworks is Task Board available in?**

Task Board ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Task Board drag & drop component free?**

Task Board is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Task Board support dark mode?**

Yes. Task Board ships light and dark themes, both drawn from the Prism design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Task Board live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/task-board

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt