Kanban

X-04WCAG 2.2 AA · Passed #448

Columns derived from a list-of-values property; cards are compact Cards wrapped in a DragSource. Cross-column drag moves the item and updates the property.

The specimen below is copied from kanban.html, which shows it inside the app shell, by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

Axis	Values
`.qf-kanban__column[data-state=over]`	drop target highlight
`.qf-kanban__card[data-state]`	dragging · overlay
`__header` · `__swatch` · `__count` · `__cards` · `__placeholder` · `__footer`	parts

Lowts

Low

Mediumak

Highjd

Mediumak

Legalmr

Drop cards here

Guidance

When to use

Use it when records move through a fixed set of states and users manage them by state, such as Backlog, In progress and Review.
Use it when the columns come from one list-of-values property and moving a card should change that property.
Use it when users need a quick count per state at a glance.
Use it as the kanban view of Search when the same results also need list or table views.

When to consider something else

Use a DataGrid when users compare many properties across records rather than move them between states. See DataGrid.
Use Search with the kanban view when the board also needs a query, filters and pagination. See Search.
Use a List when records have no state to group by. See List.
Use Cards in a gallery when the cards are for browsing, not for moving between states. See Card.

Usability

Do

Derive columns from the property's list of values and keep their order stable.
Show a count in each column header (.qf-kanban__count) and a column name in text beside the color swatch.
Keep cards compact: title, one subtitle line, and a few chips or an avatar.
Show .qf-kanban__placeholder where the card will land and data-state="over" on the target column during a drag.
Give every card a focusable title control that opens its object, as the Search kanban view does with __open.

Don’t

Do not make drag and drop the only way to change a card's state.
Do not rely on the column swatch color to identify a column.
Do not use more columns than fit without heavy horizontal scrolling; group values instead.
Do not label column menu buttons only More; name the column.

Accessibility

Keyboard

Kanban keyboard
Keys	Action
`Tab`	Moves through each column's menu button, its cards' open controls, and its footer button, column by column.
`Enter or Space`	On a card's open control, opens the object in a window.
`Enter or Space`	On a column's menu button, opens the column menu; Escape closes it.
`Move action`	The binding must offer a keyboard way to move a card, such as a Move to menu on the card listing the other columns.

Roles and names

Each card is an <article class="qf-card qf-kanban__card">; its title is the accessible name of its open control.
The binding should expose each column as a labeled group or list (for example role="list" with aria-labelledby on the header) so the column name and count are announced.
Column menu buttons are icon-only and need a name that includes the column, as Search does with More in Open.
data-state="dragging" and data-state="over" are visual only; the binding must announce drag start, target column and drop result.

Focus

After a keyboard move, keep focus on the moved card in its new column.
Closing an object window returns focus to the card's open control.
Focus order runs down one column before moving to the next.

Other requirements

Drag and drop between columns needs a single-pointer and keyboard alternative such as a Move to menu (2.5.7, 2.1.1).
Announce moves and the new column counts in a polite live region (4.1.3).
Avatars show initials only; give them an accessible name with the person's full name (1.1.1).
The board scrolls horizontally on narrow screens; each column must still reflow its cards at 320 CSS pixels (1.4.10).

Test your implementation too. This guidance covers the element as specified here. How a screen composes it (labels, order, announcements) still needs its own keyboard and screen reader check.

Accessibility tests

WCAG 2.2 AA · Passed

Passed the gate (run 358b316 on 2026-10-22): no finding in any theme. Awaiting a person’s approval of the checklist below.

Kanban test checklist
Area	Automated	A person checks
General	Passed	Color is never the only cue, text alternatives say the same thing as the graphic, and the element reads the same in the light and the dark theme.
Zoom	Passed	At 200% zoom, at 320 CSS pixels wide and with the WCAG text-spacing overrides, nothing is lost, clipped or overlapping.
Keyboard	Passed	Every row of the Keyboard table works, focus is always visible and never trapped, and the tab order follows the reading order. (4 rows)
Screen reader	Passed	With NVDA or JAWS on Windows and VoiceOver on macOS, names, roles and states are announced as Roles and names says, and changes are announced once. (4 items)

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- kanban --by "Your name" and commit a11y/approvals.json with the rebuilt pages. All test status

Package

Consumers link one stylesheet, css/classic/index.css, which includes every element. The files below are where this element is defined.

Kanban package
Source	`css/classic/composites/data.css`
Specimens also use	Avatar · Box · Button · Card · Chip · EmptyState · Icon · Table · Text · Toolbar
Sprites	`sprites/icons.svg`
React	Not yet available: the React binding has not started.

Latest updates

No recorded changes yet.

All release notes