feat(ui): Added Skip To Content

apps/site/components/withNavBar.tsx

@@ -2,6 +2,7 @@
 
 import LanguageDropdown from '@node-core/ui-components/Common/LanguageDropDown';
 import Skeleton from '@node-core/ui-components/Common/Skeleton';
+import SkipToContentButton from '@node-core/ui-components/Common/SkipToContentButton';
 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';
@@ -55,6 +56,8 @@ const WithNavBar: FC = () => {
     <div>
       <WithBanner section="index" />
 
+      <SkipToContentButton label={t('components.common.skipToContent')} />
+
       <NavBar
         navItems={navigationItems.map(([, { label, link, target }]) => ({
           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",

packages/ui-components/src/Common/SkipToContentButton/__tests__/index.test.jsx

@@ -0,0 +1,14 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { render, screen } from '@testing-library/react';
+
+import SkipToContentButton from '../';
+
+describe('SkipToContentButton', () => {
+  it('renders with correct label', () => {
+    render(<SkipToContentButton label="Skip to content" />);
+    const link = screen.getByRole('link', { name: 'Skip to content' });
+    assert.ok(link);
+  });
+});

packages/ui-components/src/Common/SkipToContentButton/index.module.css

@@ -0,0 +1,19 @@
+@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-500
+    focus:outline-none
+    dark:focus:ring-green-400;
+}

packages/ui-components/src/Common/SkipToContentButton/index.stories.tsx

@@ -0,0 +1,14 @@
+import SkipToContentButton from '#ui/Common/SkipToContentButton';
+
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
+
+type Story = StoryObj<typeof SkipToContentButton>;
+type Meta = MetaObj<typeof SkipToContentButton>;
+
+export const Default: Story = {
+  args: {
+    label: 'Skip to content',
+  },
+};
+
+export default { component: SkipToContentButton } as Meta;

packages/ui-components/src/Common/SkipToContentButton/index.tsx

@@ -0,0 +1,21 @@
+import type { FC, AnchorHTMLAttributes } from 'react';
+
+import styles from './index.module.css';
+
+type SkipToContentButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  label: string;
+};
+
+const SkipToContentButton: FC<SkipToContentButtonProps> = ({
+  label,
+  href = '#main',
+  ...props
+}) => {
+  return (
+    <a href={href} className={styles.skipToContent} {...props}>
+      {label}
+    </a>
+  );
+};
+
+export default SkipToContentButton;