Review a React flow for accessibility | DevPrompt Lab

Focuses accessibility review on how people complete a task, not on adding labels mechanically.

Reusable content

Review the component and its interaction states against the task users need to complete. Check semantic structure, accessible names, keyboard operation, visible focus, focus order, validation announcements, dialogs, loading and error states, contrast tokens, and reduced motion where relevant. Identify concrete barriers with component and line references. Recommend the smallest implementation changes and a manual keyboard and screen-reader check. Preserve the existing design system.

Component: {{COMPONENT}}

Interactions: {{INTERACTIONS}}

Design system constraints: {{DESIGN_SYSTEM}}

How to use it

Include the parent flow and expected keyboard behavior. Avoid sharing screenshots with personal information.

Example

Barrier: closing the dialog leaves focus on a removed element. Fix: store the opener and restore focus after close; verify with Tab and Shift+Tab.