Add a "skip to main content" link and a visible focus style system

[greatest0fallt1me]

Description

This is a UI/UX issue. The app shell in src/App.tsx renders a header full of nav links before <main className="main">, with no skip link, so keyboard users must tab through all navigation on every route. There is also no consistent :focus-visible ring defined globally. Add a skip link and a token-based focus style applied app-wide.

Requirements and Context

• Add a visually hidden "Skip to main content" link as the first focusable element that becomes visible on focus and jumps to <main> (give main an id and tabIndex={-1}).
• Define a global :focus-visible outline using the accent token with sufficient contrast, applied to links, buttons, inputs, and selects.
• Ensure the focus ring is not removed anywhere by outline: none (audit src/utils/tokens.ts inputStyle).
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b task/skip-link-focus-system

2. Implement changes
   • src/App.tsx (skip link + main id)
   • src/index.css (:focus-visible system, .sr-only)
   • src/utils/tokens.ts (remove blanket outline: none)
3. Test and commit
   • npm run test
   • Tab through every route to verify focus visibility
   • Include screenshots in the PR

Example commit message

task: add skip link and global focus-visible system

Acceptance Criteria

• Skip link is first tab stop and jumps to main
• Consistent visible focus ring on all interactive elements
• No element suppresses focus outline
• Meets non-text contrast for the focus indicator

Guidelines

• WCAG 2.1 AA: 2.4.1, 2.4.7, 1.4.11
• Clear documentation and inline comments
• Timeframe: 96 hours