Accessibility & input model

Public expectations for keyboard use, ARIA roles, focus, and known limitations of GraphCanvas and NodeDetail in @restormel/ui-graph-svelte.

This page describes the intended accessibility and interaction contract of the published canvas. For behaviour changes, trust the source and published .d.ts for the version you pin.

Roles and labels

  • The graph container uses role="application" with an aria-label describing the visualization (wording may vary slightly by build).
  • Optional viewport controls render as role="toolbar" with labeled buttons (zoom, fit, reset layout, fullscreen when enabled).
  • Nodes and edges that participate in keyboard interaction use tabindex="0", aria-label / type descriptions, and aria-pressed where selection applies.
  • Ghost (rejected) nodes and edges are grouped with aria-label text that distinguishes them from the main graph.
  • A status region may expose zoom percentage with aria-live="polite" when the status chip is shown.

Keyboard

  • Tab / Shift+Tab: moves through focusable nodes, edges, toolbar buttons, and other focusable chrome in DOM order (not a custom geometric “roving” order).
  • Enter / Space on a focused node selects it (and opens inline detail when enabled). On a focused edge, activates edge selection / detail behaviour consistent with pointer use.
  • Escape clears node selection, edge selection, and highlight state (global listener in addition to per-element handling). NodeDetail traps focus and closes via Escape or the close control.

Pointer and motion

  • Pan: pointer drag on the SVG background; zoom: wheel with default prevented (sensitive to trackpad delta).
  • No separate “reduced motion” flag today — zoom/pan are immediate. Hosts can wrap the canvas in their own motion preferences if required.

Known limitations

  • Focus order follows the DOM / tab order of rendered elements, not graph topology. Very large graphs can mean long tab sequences unless the host pre-filters data.
  • role="application" signals an interactive widget; some screen-reader users may prefer supplemental off-canvas summaries for dense graphs.
  • High-contrast themes depend on host-supplied CSS variables; see the integration guide.

← API reference · Performance notes