Tasks & Projects

Task list

The screen most task apps are mostly made of. SearchFilterBar and FilterChips above, DataTable in the middle, TablePagination below — plus a column menu, bulk actions behind a ConfirmDialog, and InlineEdit in the title cell so a task can be renamed without leaving the list. Chip counts come from the set filtered by everything except status, so each chip answers “how many will I get”.

Task detail

Description on the left, properties on the right — and every property is a real control. InlineEdit renames the task (Enter saves, Esc reverts) and edits the description in multiline mode, where Enter adds a line and ⌘↵ saves. Status and priority run through Combobox, assignees through MultiCombobox, and the due date through DatePicker with an English locale and English labels. Each one sits in a FormField, which is what turns the caption into a real <label> and hands the control its id.

Kanban board

The one screen here with no package equivalent — columns and cards are the app's own layout. What the app should not re-invent is what goes inside a card: the priority chip is a StatusPill, the faces are an AvatarGroup, the timestamp is a RelativeTime, and an empty column is an EmptyState. Column dots take their colour from getStatusConfig rather than a local switch. Move a card with the arrows — counts update as it lands.

Sub-task checklist

Real Checkbox controls with real <label> elements, and a real Progress — not a div with a computed width. The bar carries role="progressbar" and the track-to-bar contrast pair the package already measured, and it flips to the success tone at 100%.

Cycle progress

Four StatCard tiles plus a completion bar. The numbers are derived from the same task array the list above starts from — hard-coded KPI literals go stale the first time the data moves. Note polarity on the overdue tile: rising overdue work is bad news no matter which way the arrow points, and the delta colour has to say so.

Roadmap timeline

Quarter-scale planning above the task level. The grid and the bar placement are the app's, but the bar itself is a Progress in a positioned wrapper, the health flag is a StatusPill with a shortLabel, and the crew is an AvatarGroup. The row scrolls inside its own container so a long horizon never scrolls the page.

Best Practices

Accessibility

• Board cards move by button as well as by drag, and each button names its destination in aria-label.
• Rows with onRowClick join the tab order and answer Enter/Space — the package does that for you, but only if you pass the handler.
• Checklist items use the package's Checkbox — a Radix <button role="checkbox"> carrying aria-checked, not an <input> — tied to a real <label htmlFor>, so clicking the text toggles it and a screen reader announces the state.
• Progress bars carry an aria-label with the percentage; the warning tone adds hazard stripes because gold and yellow are indistinguishable on three of the four palettes.
• KeyboardHint is aria-hidden — the glyphs read as noise, so the button it decorates has to name its own shortcut.
• Avatars in a group are focusable buttons carrying the member's name, so the group is not a row of silent colour swatches.
• Combobox and MultiCombobox default the clear button's sr-only label to Vietnamese (“Xóa lựa chọn” / “Xóa tất cả lựa chọn”); pass clearLabel, added in 1.0.0, to name it in English — MultiCombobox needs it most, since clearable defaults to true there.
• Announce bulk results and card drops through a live region, not only by re-rendering the list.