Accessibility Remediation: Fix 18 WCAG 2.1 Issues from Light Mode Audit

[msfttoler]

Overview

Remediate all 18 accessibility issues identified in the light mode audit report. The application currently does not conform to WCAG 2.1 Level A or AA.

Audit Summary: 9 Critical (Level A) | 6 Serious (Level AA) | 3 Minor (Level AAA / Best Practice)

---

P0 — Critical (Level A) — Must Fix

• Bug fixes and test coverage improvements #1 — XSS via dangerouslySetInnerHTML — Replace unsafe HTML rendering in Login.tsx with text content and add role="alert" (15 min)
• Accessibility Remediation: Fix 18 WCAG 2.1 Issues from Light Mode Audit #2 — Missing skip navigation link — Add skip-to-main-content link in App.tsx, add id="main-content" to main element (30 min)
• feat: Shopping Cart Implementation #3 — Product image click not keyboard accessible — Convert div onClick to button with aria-label in Products.tsx (1 hr)
• Add workflow to create cart implementation tracking issue #4 — Form labels not associated with inputs — Add htmlFor/id pairs and aria-required to all ProductForm.tsx fields (2 hr)
• Add comprehensive test coverage for all untested API routes and repositories #5 — Mobile navigation hidden without alternative — Implement hamburger menu with aria-expanded in Navigation.tsx (3 hr)
• [Security] CWE-78: OS Command Injection via unsanitized deliveryPartner in delivery.ts #6 — Footer links use empty href="#" — Replace placeholder links with <span> or real routes in Footer.tsx (30 min)
• [Security] CWE-78: OS Command Injection via unsanitized deliveryPartner in delivery.ts #7 — Admin dropdown not accessible — Add ARIA menu roles, keyboard navigation (arrow/escape), outside-click close in Navigation.tsx (4 hr)
• [Security] CWE-209: Information Exposure Through Error Messages in delivery.ts #8 — Loading spinner no text alternative — Add role="status", aria-live="polite", and sr-only text in Products.tsx (15 min)
• [Security] CWE-693: Missing Security Headers in API and Frontend #9 — Modal dialog not accessible — Add role="dialog", aria-modal, focus trap, and Escape-to-close in ProductForm.tsx (4 hr)

P1 — Serious (Level AA) — Should Fix

• [Security] CWE-770: Missing Rate Limiting on All API Endpoints #10 — Focus indicator removed — Replace bare focus:outline-none with focus-visible:ring-2 across all interactive elements (2 hr)
• [Security] CWE-250: API Dockerfile Runs as Root User #11 — Color contrast failures — Replace text-gray-500 with text-gray-600 in Footer, Products, and ProductForm (1 hr)
• Add star review option to product pages #12 — No page title updates on SPA route change — Create useDocumentTitle hook and apply to every page component (1 hr)
• [agentic-workflows] Failed runs #13 — No route change announcements — Add aria-live region in App.tsx to announce navigation changes (1 hr)
• [agentics] Daily Repo Activity Summary failed #14 — Admin table sort controls missing ARIA — Convert sort headers to buttons with aria-sort in AdminProducts.tsx (2 hr)
• [agentics] Daily Repo Activity Summary failed #15 — Carousel auto-rotation without pause control — Add pause/play button and hover/focus pause to Welcome.tsx (2 hr)

P2 — Minor (Level AAA / Best Practice) — Enhancement

• Bump flatted from 3.3.3 to 3.4.2 in /frontend Azure-Samples/octocat-supply#16 — No prefers-reduced-motion support — Add reduced-motion media query to index.css and use motion-safe: variants (2 hr)
• [agentics] Daily Repo Activity Summary failed Azure-Samples/octocat-supply#17 — Heading hierarchy issues — Fix footer headings from h2 to h3, ensure one h1 per page (1 hr)
• Bump the backend-dev group across 1 directory with 9 updates Azure-Samples/octocat-supply#18 — Missing aria-label on nav element — Add aria-label="Main navigation" to Navigation.tsx (15 min)

---

Acceptance Criteria

• All P0 items resolved — application conforms to WCAG 2.1 Level A
• All P1 items resolved — application conforms to WCAG 2.1 Level AA
• Automated a11y tests pass (axe-core or equivalent)
• Manual keyboard-only navigation test passes on all pages
• Screen reader spot-check (VoiceOver) confirms no blocking issues

References

• Light Mode Audit
• Dark Mode Audit