fix(a11y): tabindex on <main> so the skip link moves focus reliably (WCAG 2.4.1)

[bilal-karim]

Summary

One-attribute change: add tabindex=\"-1\" to <main id=\"content\"> in main-content-container.svelte so the skip-navigation link reliably moves focus across browsers.

- <main id="content" class="pb-16 md:pb-0">
+ <main id="content" tabindex="-1" class="pb-16 md:pb-0">

The defect

SkipNavigation (src/lib/components/skip-nav.svelte) renders <a href=\"#content\">. Activating it should both visually scroll the target into view AND programmatically move focus to it. By HTML spec, a <main> without tabindex is not focusable — so:

• Chrome / Edge: focus moves to the target (Chromium has an in-page-anchor workaround). ✓
• Safari / older Firefox: page scrolls, but focus stays on the skip link itself. ✗

In affected browsers, the skip link looks like it works (page scrolls) but the user's next Tab cycles right back through the nav chrome — defeating the bypass for keyboard and screen-reader users.

The fix

tabindex=\"-1\":

• Makes <main> programmatically focusable so the hash-link navigation lands focus there
• Keeps it out of the natural Tab order (negative tabindex)
• Cross-browser-consistent

Closes WCAG 2.4.1 sufficient-technique G1's "programmatically moves focus" requirement.

Audit context

• WCAG 2.2 SC 2.4.1 Bypass Blocks (Level A) — Medium remediation priority.
• Issue file: audit-output/issues/2.4.1-skip-link-target-focus.md.
• Currently partially mitigated (works on Chromium-majority browsers); this PR closes the cross-browser gap.

Test plan

• Safari: load any app page, press Tab once (reveals skip link), press Enter — confirm focus moves into the main content area (next Tab should now navigate within the content, not back to the nav).
• Chrome / Edge: same flow — confirm unchanged behavior (still works).
• Firefox: same flow — confirm focus moves on activation.
• Zero visual change on any page.

Functional impact

Pure attribute addition. tabindex=\"-1\" does not place <main> in the natural Tab order, so:

• Normal keyboard navigation through page content is unaffected
• Skip link's existing scroll behavior is unaffected
• Only programmatic focus targeting (<a href=\"#content\">, focus(), etc.) gains a target

No risk to existing behavior.

🤖 Generated with Claude Code

A11y-Audit-Ref: 2.4.1-skip-link-target-focus

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	May 25, 2026 8:14pm