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.
apps/site/components/withNavBar.tsx
Outdated
| <a href="#main" className={styles.skipToContent}> | ||
| {t('components.common.skipToContent')} | ||
| </a> |
There was a problem hiding this comment.
The skip-to-content link functionality lacks test coverage. Since this is an important accessibility feature and the project has e2e tests for other navigation and accessibility features (theme toggle, language dropdown, mobile menu), consider adding a test to verify that the skip link appears on focus and correctly navigates to the main content area.
| focus:py-2 | ||
| focus:text-white | ||
| focus:ring-2 | ||
| focus:ring-green-400 |
There was a problem hiding this comment.
The skip link uses a single ring color (ring-green-400) for both light and dark modes, which may not provide optimal visual contrast in light mode. Consider using ring-green-500 for light mode and dark:ring-green-400 for dark mode to match the pattern used in other focus states (e.g., Switch component) and ensure better visibility across themes.
| focus:ring-green-400 | |
| focus:ring-green-500 dark:focus:ring-green-400 |
|
Can we move the component to a |
2 participants
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.