a11y: skip-to-main link in layout shell (#34)

[KhyFee]

Summary

• Skip link is first focusable element in LayoutShell
• Page content wrapped in <main id="main-content"> (matches Create-Python-App docs: website README uplift + catalog sync (closes #23 #24) #25)

Closes #34

Test plan

• Tab from address bar lands on skip link before header chrome
• Enter moves focus into main content on templates/docs/home routes

[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]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 1b0860c3-8f0d-445d-a68a-e309ccd97407

---

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]

Same shell pattern as Create-Python-App/website#25 — uses existing sr-only focus:not-sr-only utilities, no new CSS file.

[KhyFee]

Vercel auth pending on fork preview — logic-only change mirroring merged Create-Python-App pattern. Happy to rebase if shell layout shifts on main.

[ulises-jeremias]

Hi @KhyFee — CI failing/conflict, please rebase.

[ulises-jeremias]

Thanks for picking this up! The skip link styling looks good. One blocker before we can merge: wrapping {children} in a new <main id="main-content"> produces nested <main> landmarks, because LayoutShell wraps every route and several pages (e.g. src/app/page.tsx) already render their own <main>.

Could you rework it to one of these instead?

1. Keep only the skip link in LayoutShell and add id="main-content" to the page-level <main> elements.
2. Hoist a single <main id="main-content"> into LayoutShell around {children} and remove the page-level <main> wrappers.

Option 2 is the one we'd prefer long-term — a single landmark owned by the shell keeps every page honest.

[KhyFee]

Thanks @ulises-jeremias — good catch on nested <main>.

Went with option 2: shell keeps the single <main id="main-content">, and page-level wrappers (page.tsx, templates/extensions clients, docs layout, agents-md) are now <div> so landmarks don’t nest.

Branch is updated — please take another look when you can.

[KhyFee]

Thanks for merging #44, @ulises-jeremias — and for the nested <main> catch earlier. Glad the single-shell landmark pattern landed cleanly.