TaskBoard - Keyboard
Use TaskBoard keyboard navigation, activation, selection, range selection, reorder, movement, escape, undo, and redo behavior.
#Usage
import { TaskBoard } from '@primeui/vue-taskboard';<TaskBoard.Root v-model:tasks="tasks" data-key="id" column-field="columnId" selection-mode="multiple" @card-activate="onCardActivate" @card-select="onCardSelect" @selection-change="onSelectionChange">
<!-- TaskBoard parts -->
</TaskBoard.Root>Keyboard handling is attached to the focused board and card wrappers. The same focus, selection, activation, undo, redo, move validation, mutation, history, audit, blocked-drop, drag cancel, and menu-dismiss paths used by pointer interaction remain active.
#Keyboard Map
| Key | Runtime action |
|---|---|
| Arrow keys | Move focus across cards, columns, empty columns, and swimlane cells. |
| Home, End | Move focus to the start or end of the current column or swimlane cell. |
| Tab, Shift Tab | Move focus to the next or previous column. |
| Enter | Emits @card-activate for the focused card. |
| Space | Toggles the focused card when selection is enabled. |
| Shift Up, Shift Down | Extends range selection within the current column or swimlane cell. |
| Ctrl or Cmd A | Selects all cards in the focused column or swimlane cell. |
| Alt Up, Alt Down | Reorders the focused card or selected card set in the current lane. |
| Alt Left, Alt Right | Moves the focused card or selected card set to the previous or next column. |
| Alt Shift Up, Alt Shift Down | Moves the focused card or selected card set to the previous or next swimlane. |
| Delete, Backspace | Reserved for app-owned controls; no default delete is applied. |
| Escape | Closes menu state, cancels dragging, clears selection or focus. |
| Ctrl or Cmd Z | Undo local history. |
| Ctrl or Cmd Y | Redo local history. |
| Ctrl or Cmd Shift Z | Redo local history. |
Keyboard lookup uses the fields configured by data-key, column-field, and swimlane-field. Custom item ids and custom column fields work with the same navigation and selection paths as the default data shape.
Keyboard moves emit the same @card-move, @card-reorder, and @card-drop-blocked events as pointer movement. When the focused card is selected and multiple cards are selected, the selected set moves together; otherwise only the focused card moves.
#Accessible Surfaces
The root renders role="treegrid" and an aria-live region. Columns and swimlane rows expose group or rowgroup structure, while card wrappers render row-like items with stable data attributes.
Escape resolves TaskBoard-owned transient state in order: drag state, selection, then focus. App-owned overlays such as PrimeVue ContextMenu or dialogs should close through their own keyboard handling before focus returns to the board.
#Nested Controls
Board shortcuts ignore key events from nested native controls such as inputs, textareas, selects, buttons, links, labels tied to enabled form controls, and editable regions. They also ignore elements with interactive ARIA roles such as button, menuitem, textbox, combobox, listbox, tab, or slider.
Custom widgets built from generic elements need native semantics or an interactive ARIA role plus focus handling so TaskBoard treats them as control-owned. Without that, keys such as Delete, Space, and Ctrl or Cmd shortcuts are handled by the board surface.
#App-Owned Controls
Custom buttons, dialogs, and toolbar controls still need labels, focus management, disabled states, and visible blocked-action copy.
#Keyboard Navigation
The keyboard sample shows focus movement, activation, selection, range selection, reorder, and cross-column movement from the board surface.