Examples

Accessibility

Use package-owned keyboard behavior, ARIA labels, search, and connection validation.

keyboardA11y is on by default. Override labels with ariaLabelConfig, and return a string from isValidConnectionto announce connection rejection.

tsx

import "@aigentive/wire-react/styles.css";
import { WireCanvas, WireProvider } from "@aigentive/wire-react";

export function AccessibleCanvas({ diagram, optionCatalog }) {
  return (
    <WireProvider defaultDiagram={diagram} validateOnChange>
      <WireCanvas
        mode="edit"
        fitView
        keyboardA11y
        nodesFocusable
        edgesFocusable
        autoPanOnNodeFocus
        optionCatalog={optionCatalog}
        ariaLabelConfig={{
          canvas: "Agent workflow canvas",
          node: (node) => `Workflow node: ${node.title}`,
          edge: (edge) => `Workflow edge: ${edge.label ?? edge.id}`,
          search: "Search workflow items",
          connectionTarget: "Choose workflow connection target"
        }}
        isValidConnection={({ sourceNode, targetNode }) =>
          sourceNode.id === targetNode.id ? "Choose a different target." : true
        }
      />
    </WireProvider>
  );
}

NextTheming

Canvas accessibility