[accessibility] UX design review for complex interaction patterns

[EthosengineBot]

Context

Accessibility analysis identified 24+ mechanical violations (fixable), plus ~20% requiring UX design decisions for complex interaction patterns.

Mechanical Fixes (Can be done immediately)

• Replace role="button" with <button> elements (2 violations)
• Remove tabindex from non-interactive elements (6 violations)
• Convert role="group" to <fieldset> (4 violations)
• Fix form label associations (3 violations)

Complex Patterns Needing Design Review

1. Mediation Dialog Accessibility (reaction-bar.component.html)

   • Complex overlay with nested interactions
   • Needs proper focus management and ARIA attributes

2. Canvas-based Opinion Cluster (opinion-cluster.component.html)

   • Canvas element lacks text alternative
   • Interactive visualization needs keyboard navigation

3. Complex Form Layouts

   • Policy console with nested tabs and groups
   • May need ARIA-live regions for dynamic content

4. Dropdown/Menu Keyboard Navigation

   • Doorway-picker, proposal-vote components
   • Need complete keyboard interaction patterns

Acceptance Criteria

• Apply all mechanical fixes (24 violations)
• Design keyboard navigation strategy for canvas interactions
• Implement focus management for dialogs/overlays
• Add ARIA-live regions where needed
• Document keyboard interaction patterns
• Test with screen readers (NVDA/JAWS)
• Pass WCAG AA automated audit

Estimated Effort

• Mechanical: 2-3 hours
• UX design review: 8-12 hours
• Implementation: 6-8 hours

Priority Justification

MEDIUM - Accessibility is important but:

• Mechanical fixes can proceed immediately
• Complex patterns need UX design input (async)

Phased Approach

Phase 1 (immediate): Apply mechanical fixes
Phase 2 (design review): Keyboard navigation strategy
Phase 3 (implementation): Complex patterns + testing

---

Created by quality-deep orchestrator - Sprint 3