Add skip-to-content link and global keyboard focus visibility

[simple-agent-manager]

• Preflight completed before code changes
• ui-change

External References

N/A: This change uses existing project accessibility patterns and design tokens; no external API or library contract changed.

Codebase Impact Analysis

Changed only apps/web AppShell/accessibility files and tests: apps/web/src/components/SkipToContent.tsx, apps/web/src/components/AppShell.tsx, apps/web/src/index.css, and apps/web/tests/unit/accessibility.test.tsx. No API, auth, routing, task execution, or data model paths changed.

Documentation & Specs

N/A: This is an internal UI accessibility improvement with unit-test evidence; no public docs or specs require behavior updates.

Constitution & Risk Check

Checked no-hardcoded-values risk: styling uses existing design token --sam-color-focus-ring and does not introduce URLs, credentials, service IDs, or environment assumptions. Change is additive and non-breaking.

Summary

• Adds an accessible skip-to-content link (SkipToContent component) that is screen-reader-only by default and becomes visible when focused via keyboard, linking to #main-content
• Adds a global :focus-visible outline (2px solid --sam-color-focus-ring, outline-offset: 2px) for all interactive elements navigated via keyboard — form inputs are excluded since they already have custom box-shadow focus styles
• Adds id="main-content" to both mobile and desktop <main> elements in AppShell

Changed Files

File	Change
apps/web/src/components/SkipToContent.tsx	New component — sr-only skip link
apps/web/src/components/AppShell.tsx	Import SkipToContent, add id="main-content" to both <main> elements
apps/web/src/index.css	Skip-link focus style + global :focus-visible outline (form elements excluded)
apps/web/tests/unit/accessibility.test.tsx	6 tests — SkipToContent rendering, AppShell skip-link + main-content id on mobile/desktop

Test plan

• 6 unit tests pass (SkipToContent component + AppShell accessibility assertions)
• Full web test suite passes (2819 tests, 0 failures)
• Typecheck clean (16/16 tasks)
• CI green

Local validation commands

pnpm --filter web test -- --run tests/unit/accessibility.test.tsx
pnpm --filter web test -- --run
pnpm typecheck

Agent Preflight

• Change class: ui-change
• Impact: Additive-only — no existing styles or behavior modified
• Constitution: No hardcoded values; uses --sam-color-focus-ring design token

---

🤖 Generated with Claude Code

[codspeed-hq]

Merging this PR will not alter performance

✅ 6 untouched benchmarks

---

_{Comparing sam/execute-task-using-skill-w1bzzj (df87fe6) with main (44adc7e)}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud