Skip to content

a11y: skip-to-content / focus order on Hosted landing #4

Description

@CodewithJha

👋 New to open source?
Thanks for considering contributing to Mutiny.
This issue is intentionally beginner-friendly.
If you get stuck, ask questions in the comments.
We're happy to help.

Context

Hosted UI (apps/web) is secondary to CLI, but the landing route should still be usable from the keyboard. Landing already uses <main id="top"> in apps/web/src/app/page.tsx — there is no skip link yet.

Goal

Add a skip-to-content control and a sensible tab focus order on the Hosted landing page without changing layout or brand.

Why it matters

Keyboard and screen-reader users should reach primary content without tabbing through chrome. Small a11y wins are ideal first PRs.

Acceptance criteria

  • Skip-to-content link moves focus / scroll to main content (#top or equivalent id on <main>)
  • Sensible tab order on the Hosted landing (no focus traps; interactive controls reachable)
  • No layout, spacing, or brand redesign — a11y-only CSS/markup
  • PR description links this issue

Suggested files

  • apps/web/src/app/layout.tsx and/or apps/web/src/app/page.tsx
  • Minimal styles in apps/web/src/app/globals.css (e.g. visually-hidden until focus)

Out of scope

  • Full WCAG audit, campaign pages, color redesign, new nav IA

Hints

  • Pattern: visually hidden link as first focusable element → becomes visible on :focus.
  • Reuse existing #top / <main> rather than inventing a second landmark.
  • Manual check: Tab from address bar; first Tab should reveal skip link; Enter jumps to main.

Difficulty

S · frontend a11y · UI frozen except a11y

Docs

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions