feat(ui): Added Skip To Content (#8514)

* feat(ui): Added Skip To Content

* feat(ui): moved Skip to Content as a component, added test and storybook file

* feat(tests): remove SkipToContentButton test file

* feat(ui): refactor SkipToContentButton to use children prop instead of label

* feat(ui): update WithNavBar component structure for improved accessibility

Author: malav2110

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';
@@ -53,6 +54,10 @@ const WithNavBar: FC = () => {
 
   return (
     <div>
+      <SkipToContentButton>
+        {t('components.common.skipToContent')}
+      </SkipToContentButton>
+
       <WithBanner section="index" />
 
       <NavBar

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>