feat(ui): Added Skip To Content - #8514
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
👋 Codeowner Review RequestThe following codeowners have been identified for the changed files: Team reviewers: @nodejs/nodejs-website Please review the changes when you have a chance. Thank you! 🙏 |
There was a problem hiding this comment.
Pull request overview
This PR implements a "Skip to Content" accessibility feature that allows keyboard users to bypass navigation and jump directly to the main content. The implementation is visually hidden by default, becomes visible on keyboard focus, and requires no JavaScript.
Key changes:
- Added a skip-to-content link to the navigation bar component
- Updated all layout components to include
id="main"andtabIndex={-1}attributes on main elements - Created CSS styling for the skip link with screen-reader-only and focus states
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/i18n/src/locales/en.json | Added English translation for "Skip to content" text |
| apps/site/components/withNavBar.tsx | Added skip link above NavBar, refactored style imports to separate NavBar and component styles |
| apps/site/components/withNavBar.module.css | Created new stylesheet with skip-to-content link styling using screen-reader utilities and focus states |
| apps/site/layouts/Post.tsx | Added id="main" and tabIndex={-1} to main element |
| apps/site/layouts/Learn.tsx | Added id="main" and tabIndex={-1} to main element |
| apps/site/layouts/GlowingBackdrop.tsx | Added id="main" and tabIndex={-1} to main element |
| apps/site/layouts/DownloadArchive.tsx | Added id="main" and tabIndex={-1} to main element |
| apps/site/layouts/Download.tsx | Added id="main" and tabIndex={-1} to main element |
| apps/site/layouts/Default.tsx | Added id="main" and tabIndex={-1} to main element |
| apps/site/layouts/Blog.tsx | Added id="main" and tabIndex={-1} to main element |
| apps/site/layouts/ArticlePage.tsx | Added id="main" and tabIndex={-1} to main element |
| apps/site/layouts/About.tsx | Added id="main" and tabIndex={-1} to main element |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Can we move the component to a |
ovflowd
left a comment
ovflowd
left a comment
There was a problem hiding this comment.
I was afraid the solution wouldn't be good, but actually, 🎩 hats off to you. This is definitely the least invasive way you could have implemented this.
SGTM.
github-actions
Bot
removed
the
github_actions:pull-request
|
Lighthouse Results
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8514 +/- ##
==========================================
+ Coverage 74.21% 74.25% +0.04%
==========================================
Files 106 106
Lines 9102 9102
Branches 308 307 -1
==========================================
+ Hits 6755 6759 +4
+ Misses 2345 2341 -4
Partials 2 2 ☔ View full report in Codecov by Sentry. |
AugustinMauroy
left a comment
AugustinMauroy
left a comment
There was a problem hiding this comment.
LGMT ! Clean and it's work
github-actions
Bot
removed
the
github_actions:pull-request
Description
This PR adds Skip To Content skip link for increased accessibility and easier keyboard navigation. The skip link is visually hidden by default, becomes visible only on keyboard focus, and uses no JavaScript. It does not affect mouse or touch users.
Validation / Keyboard navigation
Before (current behavior) (pressing tab):
Keyboard focus moves through the header and navigation before reaching the main content on the Learn page.
Before.mov
After (with skip link) (same flow) (pressing tab):
A visually hidden skip link appears on keyboard focus and allows moving focus directly to the main content. The link is hidden for mouse and touch users and uses no JavaScript.
After.mov
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.