Accessibility And Performance

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 requests the card-edit workflow and 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.

Automated Enterprise browser coverage verifies focus, selection modifiers, keyboard movement, live-region semantics, and reduced-motion CSS. Before release, also test 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.

Native row virtualization

RevoGrid virtualizes workflow columns and the projected card rows. A cell contains at most one card, avoiding nested virtual scrollers and keeping card focus, drag targets, and row ownership aligned with the grid provider model.

Use cardRowHeight to reserve equal space for every card row. Choose a value that fits the number of content bands in your card template; individual swimlane definitions can override it with height. RevoGrid virtualizes those rows directly, while card identity and canonical rank remain independent of the rendered row index.

grid.kanban = {
  columns,
  cardRowHeight: 176,
  customization: { cardContent },
};

Card content is contained within its reserved row, so an undersized custom template cannot overlap the next card. Increase cardRowHeight when adding metadata rows rather than relying on content overflow.

Large-board guidance

• Use stable primitive IDs and finite numeric ranks.
• Keep render hooks pure and avoid creating network requests, timers, or global listeners inside templates.
• Put expensive derived values on the card record or memoize them outside the template.
• Configure cardRowHeight to fit the complete managed or custom card shell while keeping every projected row uniform.
• Use filters for focus, not as a substitute for remote pagination; v1 keeps the canonical dataset locally.
• Persist committed move batches rather than rewriting the entire dataset for every pointer update.

The Enterprise acceptance fixture covers 5,000 visible cards and verifies that rendered card DOM stays bounded while drag targets remain correct after virtual scrolling.