feat(ui): Added Skip To Content

apps/site/components/withNavBar.module.css

@@ -0,0 +1,18 @@
+@reference "../styles/index.css";
+
+.skipToContent {
+  @apply sr-only
+    focus:not-sr-only
+    focus:absolute
+    focus:top-4
+    focus:left-4
+    focus:z-50
+    focus:rounded
+    focus:bg-green-600
+    focus:px-4
+    focus:py-2
+    focus:text-white
+    focus:ring-2
+    focus:ring-green-400
+    focus:outline-none;
+}

apps/site/components/withNavBar.tsx

@@ -4,7 +4,7 @@ import LanguageDropdown from '@node-core/ui-components/Common/LanguageDropDown';
 import Skeleton from '@node-core/ui-components/Common/Skeleton';
 import NavBar from '@node-core/ui-components/Containers/NavBar';
 // TODO(@AvivKeller): I don't like that we are importing styles from another module
-import styles from '@node-core/ui-components/Containers/NavBar/index.module.css';
+import navBarStyles from '@node-core/ui-components/Containers/NavBar/index.module.css';
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
 import { availableLocales } from '@node-core/website-i18n';
 import dynamic from 'next/dynamic';
@@ -21,12 +21,14 @@ import { useRouter, usePathname } from '#site/navigation.mjs';
 import type { SimpleLocaleConfig } from '@node-core/ui-components/types';
 import type { FC } from 'react';
 
+import styles from './withNavBar.module.css';
+
 const ThemeToggle = dynamic(
   () => import('@node-core/ui-components/Common/ThemeToggle'),
   {
     ssr: false,
     loading: () => (
-      <Skeleton className={styles.themeToggleSkeleton} loading={true} />
+      <Skeleton className={navBarStyles.themeToggleSkeleton} loading={true} />
     ),
   }
 );
@@ -55,6 +57,10 @@ const WithNavBar: FC = () => {
     <div>
       <WithBanner section="index" />
 
+      <a href="#main" className={styles.skipToContent}>
+        {t('components.common.skipToContent')}
+      </a>
+
       <NavBar
         navItems={navigationItems.map(([, { label, link, target }]) => ({
           link,
@@ -85,7 +91,7 @@ const WithNavBar: FC = () => {
         <Link
           href="https://github.com/nodejs/node"
           aria-label="Node.js Github"
-          className={styles.ghIconWrapper}
+          className={navBarStyles.ghIconWrapper}
         >
           <GitHubIcon />
         </Link>

apps/site/layouts/About.tsx

@@ -16,7 +16,9 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
       <WithSidebar navKeys={['about', 'getInvolved']} />
 
       <div>
-        <main>{children}</main>
+        <main id="main" tabIndex={-1}>
+          {children}
+        </main>
 
         <WithMetaBar />
       </div>

apps/site/layouts/ArticlePage.tsx

@@ -15,7 +15,9 @@ const ArticlePageLayout: FC<PropsWithChildren> = ({ children }) => (
       <WithSidebar navKeys={[]} />
 
       <div>
-        <main>{children}</main>
+        <main id="main" tabIndex={-1}>
+          {children}
+        </main>
 
         <WithMetaBar />
       </div>

apps/site/layouts/Blog.tsx

@@ -54,7 +54,7 @@ const BlogLayout: FC = () => {
       <WithNavBar />
 
       <div className={styles.blogLayout}>
-        <main>
+        <main id="main" tabIndex={-1}>
           <BlogHeader category={blogData.category} />
 
           <WithBlogCategories

apps/site/layouts/Default.tsx

@@ -14,7 +14,9 @@ const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
       <WithSidebar navKeys={[]} />
 
       <div>
-        <main>{children}</main>
+        <main id="main" tabIndex={-1}>
+          {children}
+        </main>
       </div>
     </Article>
 

apps/site/layouts/Download.tsx

@@ -18,7 +18,7 @@ const DownloadLayout: FC<PropsWithChildren> = async ({ children }) => {
       <WithNavBar />
 
       <div className={styles.downloadLayout}>
-        <main>
+        <main id="main" tabIndex={-1}>
           <h1>{frontmatter.title}</h1>
 
           <WithDownloadSection releases={releases}>

apps/site/layouts/DownloadArchive.tsx

@@ -10,7 +10,9 @@ const DownloadArchiveLayout: FC<PropsWithChildren> = ({ children }) => (
     <WithNavBar />
 
     <div className={styles.downloadLayout}>
-      <main>{children}</main>
+      <main id="main" tabIndex={-1}>
+        {children}
+      </main>
     </div>
 
     <WithFooter />

apps/site/layouts/GlowingBackdrop.tsx

@@ -22,6 +22,8 @@ const GlowingBackdropLayout: FC<
       <GlowingBackdrop />
 
       <main
+        id="main"
+        tabIndex={-1}
         className={classNames({
           [styles.homeLayout]: kind === 'home',
         })}

apps/site/layouts/Learn.tsx

@@ -17,7 +17,7 @@ const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
       <WithSideBar navKeys={['learn']} />
 
       <div>
-        <main>
+        <main id="main" tabIndex={-1}>
           {children}
 
           <WithSidebarCrossLinks navKey="learn" />

apps/site/layouts/Post.tsx

@@ -27,7 +27,7 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
 
       <div className={styles.contentLayout}>
         <div className={styles.postLayout}>
-          <main>
+          <main id="main" tabIndex={-1}>
             {type === 'vulnerability' && <EOLAlert />}
 
             <h1>{frontmatter.title}</h1>

packages/i18n/src/locales/en.json

@@ -268,7 +268,8 @@
       "themeToggle": {
         "light": "Switch to Light Mode",
         "dark": "Switch to Dark Mode"
-      }
+      },
+      "skipToContent": "Skip to content"
     },
     "metabar": {
       "lastUpdated": "Last Updated",