a11y: skip-to-main-content link in layout shell

[KhyFee]

Summary

• Skip link first in the shell; focuses #main-content (closesa11y: add skip-to-main-content link in site layout #13)
• Page children wrapped in <main id="main-content">

Test plan

• Tab from URL bar hits skip link first
• Enter jumps to main (templates/docs/extensions via shared layout)

Summary by CodeRabbit

• Accessibility Improvements
  • Added a keyboard-accessible “Skip to main content” link.
  • Added a clearly identified main content landmark to improve navigation for assistive technology users.

[vercel]

@KhyFee is attempting to deploy a commit to the create-node-app Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a2acedb4-14e3-4eb2-850b-c62f5dd08380

📥 Commits

Reviewing files that changed from the base of the PR and between 7b25987 and efb68bb.

📒 Files selected for processing (1)

• src/components/layout-shell.tsx

---

📝 Walkthrough

Walkthrough

The site shell adds a keyboard-accessible “Skip to main content” link and wraps page children in a focusable <main id="main-content"> landmark.

Changes

Accessibility navigation

Layer / File(s)	Summary
Skip link and main landmark src/components/layout-shell.tsx	Adds a skip link targeting #main-content and wraps page children in a focusable <main> element.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers:ulises-jeremias

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main accessibility change in the pull request.
Linked Issues check	✅ Passed	The change directly implements issue #13 by adding a shared skip link and a focusable #main-content landmark.
Out of Scope Changes check	✅ Passed	The reported changes are limited to the shared layout accessibility enhancement described in issue #13.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[KhyFee]

Friendly ping on this accessibility PR — happy to adjust if review feedback comes up, or close it if the approach isn’t a fit. Thanks for considering!

[ulises-jeremias]

Thanks for the ping — the skip-link pattern is the right one (sr-only until focus, href="#main-content").

Please do not wrap {children} in a new <main>. Most routes already render their own <main> (homepage, catalog pages, docs/layout.tsx), so this would nest landmarks and fail axe.

Two clean options:

1. Keep the skip link in LayoutShell, and target a wrapper that is notmain:
   <div id="main-content" tabIndex={-1} className="flex-1">{children}</div>
2. Or put id="main-content" on the existing page-level <main>s and leave the shell as a skip-link-only change.

The Vercel check is org preview authorization for the create-node-app team, not a problem with this diff. Happy to re-review after the landmark fix.

This tracks website#13.