workflow-graph-two-lane-accessibility

Implement accessible two-lane workflow graphs with keyboard navigation and screen reader compatibility.

1|Updated Dec 23, 2025
One-click install
npx skills add https://github.com/jonnymuir/Umbraco.Prism --skill workflow-graph-two-lane-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: workflow-graph-two-lane-accessibility
Source: https://github.com/jonnymuir/Umbraco.Prism/tree/main/.claude/skills/workflow-graph-two-lane-accessibility
Command: npx skills add https://github.com/jonnymuir/Umbraco.Prism --skill workflow-graph-two-lane-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the challenge of maintaining accessibility and structural clarity in complex workflow canvases that require distinct front-stage and back-stage authoring lanes.

Core Features & Use Cases

  • Structural Lane Management: Enforces a clear visual and structural separation between front-stage and back-stage processes to improve authoring orientation.
  • Accessibility Compliance: Integrates Storybook axe checks, keyboard focus management, and non-pointer fallback paths to ensure the graph is usable by all.
  • Use Case: Use this when building a workflow editor where users must distinguish between customer-facing actions and internal administrative tasks while ensuring the interface remains navigable via keyboard.

Quick Start

Apply the workflow-graph-two-lane-accessibility patterns to your current canvas component by ensuring each stage lane has a stable heading and the viewport is focusable.

Frequently Asked Questions about workflow-graph-two-lane-accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an accessible workflow graph with keyboard navigation in a frontend editor?▼

A two-lane workflow graph separates front-stage and back-stage processes to improve orientation in complex authoring interfaces. This pattern is needed when users must distinguish between customer-facing actions and internal administrative tasks within the same workflow editor.

How do I separate front-stage and back-stage logic in a workflow graph UI?▼

You separate front-stage and back-stage logic by implementing structural lane management with stable headings and a focusable viewport. This enforces a clear visual and structural distinction between customer-facing actions and internal administrative tasks.

Does this workflow graph pattern integrate with Storybook axe accessibility checks?▼

Yes, the workflow graph pattern integrates Storybook axe checks to validate accessibility compliance. It relies on keyboard focus management and non-pointer fallback paths to ensure the graph canvas remains fully usable by all users.

What are the structural requirements for screen reader compatible workflow graphs?▼

Screen reader compatible workflow graphs require adherence to structural lane definitions and non-interactive node design patterns. Each stage lane must have a stable heading and the viewport itself must be focusable to satisfy accessibility standards.

Can I use non-interactive nodes in a two-lane workflow graph without breaking keyboard focus?▼

Yes, non-interactive node design patterns are required to maintain keyboard focus in a two-lane workflow graph. These patterns ensure non-pointer fallback paths function correctly without disrupting the screen reader's navigation flow.