Board
The Kanban board of a project: a column per status, cards that move between them, and a voice that says how the move went. The board is controlled; apply onMove with moveBoardCards and save it. Turn on "Fail the next save" to see the error path.
- Board
- BoardColumn
- BoardCard
- BoardAnnouncer
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Board
Drag a card, use its handle with Enter and the arrow keys, or open its menu.
To do
2 issuesSK-101Priority Urgent
Search suggestions skip words with accented letters- search
- backend
BugDue OverdueAL
SK-105Priority Lowest
Offline modeEpicKJ
In progress
2 issues Over the limit of 1SK-102Priority High
Keyboard shortcut sheet for the editor- frontend
- accessibility
FeatureDue GH
SK-103Priority Medium
Move the export queue to a background worker so large projects no longer time out while the archive is being built- backend
- performance
- docs
Improvement
In review
0 issuesNo issues. Drop a card here.
Done
1 issueSK-104Priority Low
Write the getting started guide- docs
TaskAT
Dark theme, Board
Drag a card, use its handle with Enter and the arrow keys, or open its menu.
To do
2 issuesSK-101Priority Urgent
Search suggestions skip words with accented letters- search
- backend
BugDue OverdueAL
SK-105Priority Lowest
Offline modeEpicKJ
In progress
2 issues Over the limit of 1SK-102Priority High
Keyboard shortcut sheet for the editor- frontend
- accessibility
FeatureDue GH
SK-103Priority Medium
Move the export queue to a background worker so large projects no longer time out while the archive is being built- backend
- performance
- docs
Improvement
In review
0 issuesNo issues. Drop a card here.
Done
1 issueSK-104Priority Low
Write the getting started guide- docs
TaskAT
High contrast theme, Board
Drag a card, use its handle with Enter and the arrow keys, or open its menu.
To do
2 issuesSK-101Priority Urgent
Search suggestions skip words with accented letters- search
- backend
BugDue OverdueAL
SK-105Priority Lowest
Offline modeEpicKJ
In progress
2 issues Over the limit of 1SK-102Priority High
Keyboard shortcut sheet for the editor- frontend
- accessibility
FeatureDue GH
SK-103Priority Medium
Move the export queue to a background worker so large projects no longer time out while the archive is being built- backend
- performance
- docs
Improvement
In review
0 issuesNo issues. Drop a card here.
Done
1 issueSK-104Priority Low
Write the getting started guide- docs
TaskAT
UsageLink to the section Usage
import { Board, BoardColumn, BoardCard, BoardAnnouncer } from '@skribly/ui/tracker'<BoardAnnouncer message={message} />
<Board aria-label={t('board.title')} columns={columns} labels={labels}
onMove={(move) => { setColumns((c) => moveBoardCards(c, move)); save(move) }} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Each column is a section named by its heading, holding a React Aria GridList: one tab stop per column, arrow keys between cards, typeahead by key and title.
- Cards move by pointer drag, by keyboard and screen reader through the drag handle (Enter, then arrows and Enter, with React Aria’s spoken instructions), and by the move menu, the one-pointer way to move that WCAG 2.5.7 asks for.
- Focus follows a card that the menu moved.
- BoardAnnouncer reads saved moves politely and failed ones assertively, and its visible message stays until the next one.
- Over a work in progress limit the count gains a warning glyph and overLimit words.
- Columns stack below 48rem and scroll in their own box above it.
This demo runs through axe in all three themes on every test run. See what the tests check.