feat: full WCAG AA 2.1 compliance and e2e tests

[Anish701]

Fixes #88

Description

Brings the template-ui to full WCAG 2.1 AA compliance. This includes semantic HTML fixes (sidebar chat list migrated from role="listbox" + role="option" to a proper <ul>/<li>/<button> structure), colour-contrast improvements across muted and destructive tokens, aria-hidden on decorative icons, descriptive aria-label values on all interactive controls, a prefers-reduced-motion global CSS rule, and a hidden <h1> landmark on the chat page. A new @axe-core/playwright E2E suite (e2e/accessibility/wcag.spec.ts) validates all pages in both light and dark mode against axe's wcag2a, wcag2aa, and wcag21aa tag sets.

Changes

• Sidebar.tsx: replace role="listbox" div list with semantic <ul>/<li>; move click handler onto a <button> with aria-current; add focus-within visibility to action buttons; include chat title in rename/delete aria-labels
• SettingsPage.tsx: remove redundant <nav> wrapping the tablist (fixes nested landmark + role conflict)
• ChatPage.tsx: add visually-hidden <h1> page title landmark
• ChatMessagesView.tsx: switch aria-live from assertive → polite on thinking indicator; add SR-only "(opens in new tab)" text on external links; fix colour inheritance (text-inherit) on markdown <p> and <li> nodes
• AppLayout.tsx: add explicit role="navigation" to PageSidebar; remove redundant aria-label from non-landmark main-content div
• MemoryList.tsx / RulesEditor.tsx: contextual aria-label on remove/toggle controls; aria-hidden on decorative icons; improved contrast on info-banner and empty-state text
• AlwaysAllowedTools.tsx: aria-hidden on decorative icon; bump muted text contrast
• TodoStrip.tsx: bump completed-state green token for sufficient contrast ratio
• global.css: add prefers-reduced-motion media query; fix dark-mode --destructive token contrast
• accessibility.test.tsx: add unit-test suites for MemoryList, RulesEditor, SubAgentIndicator, and Sidebar; fix duplicate describe blocks
• e2e/accessibility/wcag.spec.ts (new): full axe-core/Playwright WCAG 2.1 AA E2E suite covering Home, Chat, and Settings (all 5 tabs) in light + dark mode
• e2e/page-objects/SettingsPage.ts: fix clickTab to use role="tab" selector; add selectTab helper that waits for panel visibility
• package.json / package-lock.json: add @axe-core/playwright ^4.12.1 dev dependency

AI Disclosure

• AI used: Yes
• Tool(s): Claude Code
• Scope: WCAG auditing and fixes across all modified components, new unit test suites, and the new E2E accessibility spec
• Human verification: Diff reviewed manually; bugbot findings identified and fixed prior to MR

Checklist

• I have reviewed my own diff
• Tests pass with adequate coverage
• Docs and config updated if needed
• AI output verified for correctness and hallucinated dependencies

Deployment & Security Impact

None

Reviewer Notes

• The Sidebar restructuring (listbox → ul/li/button) is the highest-risk change — verify keyboard navigation (Arrow Up/Down, Enter) still works end-to-end.
• aria-live="polite" on the thinking indicator is intentional; assertive was causing excessive AT interruptions mid-stream.
• The @axe-core/playwright E2E tests require a running dev server — they are gated behind the existing e2e npm script and will not run in unit-test CI.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Enterprise

Run ID: 07549e0d-0a73-43f0-9d5d-24f5ebc54647

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}