Skip to content

fix: add skip-to-content link as the first focusable element - #353

Open
MaximeGaudin wants to merge 1 commit into
mainfrom
fix/issue-142-skip-link
Open

fix: add skip-to-content link as the first focusable element#353
MaximeGaudin wants to merge 1 commit into
mainfrom
fix/issue-142-skip-link

Conversation

@MaximeGaudin

Copy link
Copy Markdown
Owner

Summary

  • Page.astro's shared layout renders a sticky header (logo + 6 nav links) before <main>, with no bypass link — keyboard and screen-reader users had to tab through the whole nav on every page to reach content.
  • Added a "Skip to content" anchor as the first focusable element in <body>, targeting <main id="main"> (id added to the existing <main>).
  • The link is visually hidden until it receives keyboard focus (slides in from the top edge), styled as an ink pill matching the console aesthetic, with a --signal-bright focus outline. It sits above the sticky header (z-index: 100 > header's 40).

Implements WCAG 2.4.1 Bypass Blocks (technique G1).

Fixes #142

Test plan

  • Verified in the built HTML that <a class="skip-link" href="#main"> is the first child of <body> on every page (index, rules, …) and that <main id="main"> is the matching target.
  • Skip-link text contrast (--paper-raised on --ink) is 18:1, well above AA.
  • pnpm run build in apps/docs: 48 pages built. pnpm run lint (biome + astro check + check-no-todos): 0 errors, 0 warnings, clean.
  • CI green on the PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Docs site: no skip-to-content link for keyboard/screen-reader users

1 participant