feat(ui): add WCAG 2.1 AA accessibility compliance

[preetsuthar17]

Summary

Adds comprehensive accessibility improvements for visually impaired users to achieve WCAG 2.1 AA baseline compliance. Closes #126.

• Skip-to-content link in layout for keyboard users to bypass navigation
• ARIA labels on all icon-only buttons (sidebar toggle, send/stop, new chat, refresh, delete, dismiss)
• aria-hidden="true" on all decorative SVG icons and lucide-react icons to prevent screen reader clutter
• aria-expanded on all collapsible/toggle controls (sidebar sections, advanced options, details blocks, thinking block)
• aria-current on the active conversation in sidebar
• aria-live="polite" live regions for agent status updates and chat messages (role="log")
• role="dialog" + aria-modal on mobile sidebar drawer with Escape key dismiss
• role="alertdialog" on permission request dialogs
• role="status" on streaming indicators with descriptive labels
• nav landmark wrapping sidebar navigation items
• Screen reader-only text for phase status icons and completed plan items
• aria-busy on submit button during form submission
• Enhanced focus-visible outlines via global :focus-visible base style
• prefers-reduced-motion: reduce now disables all transitions and animations globally

Files changed (11)

File	Changes
layout.tsx	Skip-to-content link, id="main-content"
sidebar.tsx	aria-label, aria-expanded, aria-current, nav landmark, mobile dialog role, Escape key
composer.tsx	aria-label on textarea/button, role="status" live region, loader label
chat.tsx	aria-label on icon buttons, role="log" on messages area
message.tsx	aria-label on articles, aria-expanded on details, sr-only completed text, streaming status
thinking-block.tsx	aria-hidden on SVGs, aria-expanded on details, role="region"
permission-dialog.tsx	role="alertdialog" with label
notice-banner.tsx	aria-label on dismiss button
create-form.tsx	aria-expanded on advanced toggle, aria-busy on submit
spritz-list.tsx	aria-hidden on phase icons, sr-only status text
index.css	Global :focus-visible outline, prefers-reduced-motion animation disabling

Test plan

• Tab through the entire app — verify visible focus rings on all interactive elements
• Use VoiceOver (macOS) or NVDA to navigate: sidebar, chat, create form
• Verify skip-to-content link appears on Tab and jumps to main content
• Verify Escape key closes mobile sidebar drawer
• Confirm screen reader announces status changes (agent status, streaming indicators)
• Confirm all icon-only buttons have descriptive labels read by screen reader
• Enable prefers-reduced-motion in OS settings — verify animations are disabled
• Verify no focus traps in sidebar, dropdown menus, or permission dialogs

[gitrank-connector]

👍 GitRank PR Analysis

Score: 20 points

Metric	Value
Component	Other (1× multiplier)
Severity	P2 - Medium (20 base pts)
Final Score	20 × 1 = 20

Eligibility Checks

Check	Status
Issue/Bug Fix	✅
Fix Implementation	✅
PR Documented	✅
Tests	✅ (not required)
Lines Within Limit	✅

Impact Summary

This PR adds comprehensive WCAG 2.1 AA accessibility compliance across the UI by implementing ARIA labels, semantic HTML roles, keyboard navigation support, screen reader announcements, focus management, and reduced-motion preferences. The changes affect 11 files with 133 total lines modified, touching critical user-facing components like the sidebar, chat interface, composer, and forms. The implementation is thorough and well-documented with clear descriptions of each accessibility feature added.

Analysis Details

Component Classification: This PR implements accessibility improvements across multiple UI components (sidebar, composer, chat, forms, etc.) rather than fixing a specific component-level bug. It's categorized as OTHER since it's a cross-cutting accessibility enhancement.

Severity Justification: Classified as P2 (Medium) because while accessibility compliance is important for usability and legal/regulatory requirements, it does not cause service outages or data loss. The changes improve user experience for visually impaired users but the application remains functional without them.

Eligibility Notes: Issue: True - PR explicitly closes issue #126 for accessibility compliance. Fix Implementation: True - code changes comprehensively implement all claimed accessibility features (ARIA labels, roles, keyboard support, etc.). PR Linked: True - detailed description with summary, file-by-file changes, and test plan provided. Tests: False - no test files modified. Tests Required: False - accessibility improvements to UI components do not require automated tests in the traditional sense; these are typically validated through manual testing with screen readers and keyboard navigation, which the PR includes in its test plan.

---

Analyzed by GitRank 🤖