skills.rest
jonnymuir
jonnymuirCOMMUNITY
Explore all skills by this author →
Website𝕏@jonnymooGitHub

workflow-list-workspace-accessibility

Implement keyboard-accessible table-based workflow editors with semantic structure.

1|Updated Dec 23, 2025
Search Tags:#workflow#accessibility#ui-patterns#screen-reader#keyboard-navigation#table-editor
One-click install
npx skills add https://github.com/jonnymuir/Umbraco.Prism --skill workflow-list-workspace-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: workflow-list-workspace-accessibility
Source: https://github.com/jonnymuir/Umbraco.Prism/tree/main/.squad/skills/workflow-list-workspace-accessibility
Command: npx skills add https://github.com/jonnymuir/Umbraco.Prism --skill workflow-list-workspace-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the friction in workflow editors where visual graph interfaces often lack keyboard accessibility and efficient structural editing, leading to poor screen-reader support and slow authoring experiences.

Core Features & Use Cases

  • Semantic Table Editing: Provides a structured, keyboard-navigable table interface for managing workflow stages and transitions.
  • Keyboard-First Interaction: Supports arrow-key navigation, Enter-to-edit behaviors, and shortcut-based reordering to ensure accessibility parity with visual drag-and-drop.
  • Use Case: Use this pattern when building a complex workflow management tool where users need to quickly compare and edit metadata for multiple stages without relying on a mouse or complex canvas interactions.

Quick Start

Apply the workflow list accessibility pattern to the current project by implementing a semantic table structure that binds to the existing workflow stages model and supports keyboard-based reordering.

Frequently Asked Questions about workflow-list-workspace-accessibility

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

FAQPage Schema
How do I make a workflow editor accessible with keyboard navigation?▼

Make a workflow editor accessible by implementing a semantic table structure that binds to existing workflow stages, supporting arrow-key navigation, Enter-to-edit behaviors, and shortcut-based reordering for keyboard-first interaction.

What is the best way to build a screen-reader compatible workflow state management interface?▼

Build a screen-reader compatible workflow state management interface by standardizing structural editing operations within a semantic table, ensuring complex stage and transition configurations maintain visual graph model integrity.

Can I use a table interface for complex stage and transition configurations instead of a visual graph?▼

Yes, you can use a semantic table interface for complex stage and transition configurations. It provides a structured, keyboard-navigable layout that maintains structural integrity with visual graph models while enabling efficient metadata comparison.

How do I support both pointer-based and keyboard-based interaction contracts in a workflow table?▼

Support both interaction contracts by standardizing all structural editing operations within the table editor, ensuring keyboard-first behaviors like arrow-key navigation and shortcut-based reordering achieve parity with pointer-based drag-and-drop actions.

When do I need to use a semantic table structure for workflow management?▼

Use a semantic table structure for workflow management when building complex tools where users need to quickly compare and edit metadata for multiple stages without relying on a mouse or complex canvas interactions.

Why does my visual graph workflow editor lack screen-reader support and efficient structural editing?▼

Visual graph workflow editors often lack screen-reader support because they prioritize canvas interactions over accessibility. Implementing a structured, keyboard-navigable table interface resolves this friction and enables faster authoring experiences.

Related Skills

Explore More Software Engineering Skills→
mikeyfennelly1mikeyfennelly1

react-flow

Create interactive node-based graph visualizations and workflow editors with React.

Community
Intermediate
jonnymuirjonnymuir
1

workflow-editor-simulation-host-ownership

Maintain workflow path simulation state in the host editor.

Community
Intermediate
HDeiblerHDeibler
6

accessibility-robust

Audit UI markup for semantic HTML and correct ARIA usage.

Community
Intermediate
jonnymuirjonnymuir
1

workflow-slot-canvas-movement-model

Standardize slot-based workflow canvas movement with explicit command-based reordering.

Community
Intermediate