feat: Add ARIA Labels, Keyboard Navigation, and Screen Reader Support to Editors and Panels (#770)

[karanpatill]

Summary

Implements WCAG-compliant accessibility features across the Template Playground,
resolving #770. Users with disabilities (visual impairments, motor disabilities)
can now fully interact with the application using keyboard-only navigation and
assistive technologies like screen readers.

Changes Made

Monaco Editors (Concerto, Markdown, JSON)

• Added ariaLabel property to editor options:
  • "Concerto Editor" for the Concerto model editor
  • "Markdown Editor" for the TemplateMark editor
  • "JSON Editor" for the agreement data editor
• Leverages Monaco's built-in accessibility features (Alt+F1 for accessibility options, Ctrl+M to toggle Tab key behavior)

PlaygroundSidebar

• Added role="region" and aria-label="Playground Sidebar" to the <aside> element
• Added aria-label="Top Navigation" and aria-label="Bottom Navigation" to <nav> elements
• Added onKeyDown handlers to all sidebar items for Enter and Space key activation

ProblemPanel

• Added role="region" and aria-label="Problems Panel" to the container element

AIChatPanel

• Added role="region" and aria-label="AI Chat Panel" to the container element
• Added role="button", tabIndex={0}, aria-pressed, and onKeyDown handlers to the context toggle buttons (TemplateMark, Concerto, Data)
• Added aria-label="Message to AI Assistant" to the chat textarea

Testing

• Verified keyboard Tab navigation cycles through all sidebar buttons
• Verified Enter/Space key activates sidebar buttons and context toggles
• Verified aria-pressed updates correctly on context toggles
• Verified role="region" landmarks are announced correctly by screen readers
• Verified Monaco editor ARIA labels are applied and announced

WCAG Compliance

• 1.3.1 Info and Relationships – semantic roles added
• 2.1.1 Keyboard – all interactive elements keyboard accessible
• 4.1.2 Name, Role, Value – ARIA labels and states applied

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	c69e24d
🔍 Latest deploy log	https://app.netlify.com/projects/ap-template-playground/deploys/69a6ff2f1222860008b2f586
😎 Deploy Preview	https://deploy-preview-772--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.