Accessible Component Spec Writer

Write accessibility specifications for the following UI component:

Component: {{component_name}} (e.g., modal dialog, dropdown menu, data table, date picker) Framework: {{framework}} (e.g., React, Vue, plain HTML — affects specific code examples) WCAG Target Level: {{wcag_level}} (A / AA / AAA)

Output complete accessibility specs:

1. ARIA Roles & Properties

• Required role attribute
• Required and optional aria-* attributes
• State management (aria-expanded, aria-selected, aria-disabled etc.)

2. Keyboard Navigation

• Tab stops and focus order
• Keyboard shortcuts (Enter, Space, Escape, Arrow keys)
• Focus trap behavior (if applicable)

3. Screen Reader Behavior

• What is announced when component receives focus
• What changes are announced dynamically
• Labels and descriptions required

4. Visual Requirements

• Focus indicator (minimum contrast and size)
• Color contrast requirements for all states
• Motion/animation considerations

5. Test Checklist

• Manual test steps
• Automated test suggestions (axe-core rules to target)

6. Common Mistakes to Avoid