Keyboard and Accessibility

Use the same board with pointer, touch or keyboard. Keep the managed card shell when customizing content so focus, selection and announcements remain connected to each card.

Interactive example

Move without a mouse

The board announces card selection and move targets.

Try it: Tab to a card. Space picks it up, arrows choose a target, Enter drops it, and Escape cancels.

Reset

Loading example…

What to notice: Keyboard moves use the same validation and events as pointer moves.

TypeScript source

Install the packages from Getting Started, then use this source in your app.

board-actions.ts

board-actions.ts

import type { KanbanPlugin, KanbanConfig } from '@revolist/kanban';
import type { WorkCard } from './first-board';

export function moveResearch(kanban: KanbanPlugin<WorkCard>, columnProp: string) {
  return kanban.moveCards(['task-1'], { columnProp });
}
export function moveResearchToPlatform(kanban: KanbanPlugin<WorkCard>) {
  return kanban.moveCards(['task-1'], { columnProp: 'todo', swimlaneId: 'platform' });
}
export function selectTodoCards(kanban: KanbanPlugin<WorkCard>) {
  kanban.setSelectedCardIds(kanban.getCards().filter(card => card.status === 'todo').map(card => card.id));
}
export const workInProgress: Partial<KanbanConfig<WorkCard>> = {
  columns: [{ prop: 'todo', name: 'To do' }, { prop: 'doing', name: 'In progress', wipLimit: 1 }, { prop: 'done', name: 'Done' }],
  wipBehavior: 'block',
};
export const startBeforeDone: Partial<KanbanConfig<WorkCard>> = {
  rules: { canDrop: ({ cards, targetColumn }) => targetColumn.prop === 'done' && cards.some(card => card.status === 'todo') ? 'Start the task before marking it done.' : true },
};
export function frenchBoard(config: KanbanConfig<WorkCard>): KanbanConfig<WorkCard> {
  return { ...config, locale: 'fr-FR', columns: config.columns?.map(column => ({ ...column, name: ({ todo: 'À faire', doing: 'En cours', done: 'Terminé' } as Record<string, string>)[String(column.prop)] ?? column.name })), labels: { ...config.labels, emptyColumn: 'Aucune carte', dropCardHere: 'Déposer une carte ici', moveCancelled: 'Déplacement annulé', editCard: 'Modifier la carte', deleteCard: 'Supprimer la carte' } };
}

Download board-actions.ts

first-board.ts

first-board.ts

import { defineCustomElements } from '@revolist/revogrid/loader';
import { KanbanPlugin, type KanbanConfig } from '@revolist/kanban';
import '@revolist/revogrid-pro/styles.css';
import '@revolist/kanban/styles.css';

export interface WorkCard {
  id: string; title: string; status: string; order: number;
  description?: string; team?: string; owner?: string; priority?: string;
  tags?: string[]; progress?: number; startDate?: string; endDate?: string;
}
export const demoCards: WorkCard[] = [
  { id: 'task-1', title: 'Research customer needs', description: 'Collect feedback for the next release.', status: 'todo', team: 'product', owner: 'Ana', priority: 'normal', order: 1000 },
  { id: 'task-2', title: 'Build onboarding', description: 'Make the first session useful.', status: 'doing', team: 'product', owner: 'Mia', priority: 'high', order: 1000 },
  { id: 'task-3', title: 'Improve API errors', description: 'Return actionable validation messages.', status: 'todo', team: 'platform', owner: 'Rui', priority: 'normal', order: 2000 },
  { id: 'task-4', title: 'Release checklist', description: 'Ready for the next deployment.', status: 'done', team: 'platform', owner: 'Sam', priority: 'normal', order: 1000 },
];
export const boardConfig: KanbanConfig<WorkCard> = {
  columns: [{ prop: 'todo', name: 'To do', size: 210 }, { prop: 'doing', name: 'In progress', size: 210 }, { prop: 'done', name: 'Done', size: 210 }],
  card: { titleField: 'title' }, cardRowHeight: 88,
  addCard: false, swimlaneColumn: false,
};

export async function configureBoard(
  grid: HTMLRevoGridElement,
  config: KanbanConfig<WorkCard> = boardConfig,
  cards: readonly WorkCard[] = demoCards,
  extraPlugins: HTMLRevoGridElement['plugins'] = [],
) {
  await defineCustomElements();
  grid.plugins = [KanbanPlugin, ...extraPlugins]; // The packaged editor and history install automatically.
  grid.columns = [{ prop: 'title', name: 'Title' }, { prop: 'status', name: 'Status' }, { prop: 'owner', name: 'Owner' }];
  // Cached remote data can hydrate immediately: finish initial grid setup first.
  grid.kanban = config.remote ? { ...config, remote: false } : config;
  grid.source = cards.map(card => ({ ...card }));
  await grid.componentOnReady();
  const plugins = await grid.getPlugins();
  const kanban = plugins.find((plugin): plugin is KanbanPlugin<WorkCard> => plugin instanceof KanbanPlugin);
  if (!kanban) throw new Error('Kanban could not start.');
  if (config.remote) grid.kanban = config;
  return kanban;
}

// Give your container a width and mount once after it exists in the DOM.
export async function createKanbanBoard(container: HTMLElement) {
  await defineCustomElements();
  const grid = document.createElement('revo-grid');
  grid.style.cssText = 'display:block;width:100%;height:400px';
  container.append(grid);
  try {
    const kanban = await configureBoard(grid);
    return { grid, kanban, destroy() { grid.remove(); } };
  } catch (error) { grid.remove(); throw error; }
}

Download first-board.ts

Try it: Tab to a card, select or pick it up with the documented shortcuts, move to a target with arrows and cancel with Escape. Open the context menu with Shift+F10 and edit with Enter.

Accessibility contract

• The managed card shell exposes selection, read-only, invalid, and drag state without depending on custom card content.
• Each selectable card shell is keyboard focusable. Space picks up or drops, arrows move the proposed target, and Escape cancels. Enter completes an active keyboard move; when no move is active it requests the card editor. Shift+F10 opens the card context menu.
• Ctrl+Space or Cmd+Space toggles the focused card in the managed multi-selection. Shift+Space extends the selection from the current anchor. Keyboard pickup first synchronizes selection when the focused card was not already selected.
• A live region announces selection, pickup, target position, validation failures, completion, and cancellation using KanbanLabels.
• Cards expose checkbox selection state, read-only and invalid identity state, plus their supported keyboard shortcuts. Focus uses a persistent high-contrast outline that is distinct from the selected-card treatment.
• Column and swimlane controls have localized expand/collapse names.
• Motion used for card hover and disclosure controls is removed when the operating system requests reduced motion.
• Custom content should use meaningful headings and text, mark nested interactive controls so they do not initiate card movement, and maintain sufficient contrast for rule states.

Check custom cards at 200% and 400% zoom, in forced-colors/high-contrast mode, with keyboard-only navigation, and with the screen reader/browser combinations your application supports.

Next steps

See moving cards, selection and card design. See the Kanban API for exact types and signatures.