feat: added a skip link (#3850)

components/Workspaces/WorkspaceLayout.tsx

@@ -68,10 +68,10 @@ export const WorkspaceLayout = ({ workspaceId, banner, children, footer }: Works
             )}
           </ClientOnly>
         </div>
-        <div className="flex-col w-full items-center grow">
+        <main id="main" className="flex-col w-full items-center grow">
           <ClientOnly>{banner}</ClientOnly>
           <div className={clsx("w-full min-w-screen min-h-[100px] pb-20", banner && "md:mt-9")}>{children}</div>
-        </div>
+        </main>
       </div>
       {footer ? (
         <div className="sticky bottom-0 bg-light-slate-2 border-t h-16 pr-3 flex flex-col justify-center items-end">

components/shared/SkipLink.tsx

@@ -0,0 +1,13 @@
+export const SkipLink = ({ id }: { id: string }) => {
+  return (
+    <a
+      href={`#${id}`}
+      className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full underline underline-offset-4 transition-transform duration-300 bg-white outline-light-orange-10 outline-1 p-2 rounded-md focus:top-11"
+      style={{
+        zIndex: 9999,
+      }}
+    >
+      Skip to main content
+    </a>
+  );
+};

layouts/filter.tsx

@@ -27,9 +27,9 @@ const FilterLayout = ({ children }: { children: React.ReactNode }) => {
           username={userOrg}
         />
       </div>
-      <main className="flex w-full flex-1 flex-col items-center  py-8 bg-light-slate-2">
+      <div className="flex w-full flex-1 flex-col items-center  py-8 bg-light-slate-2">
         <div className="container mx-auto px-2 md:px-16">{children}</div>
-      </main>
+      </div>
       <Footer />
     </WorkspaceLayout>
   );

layouts/hub-page.tsx

@@ -86,9 +86,9 @@ const HubPageLayout = ({
         />
       </div>
 
-      <main className="flex flex-col items-center flex-1 w-full py-8  bg-light-slate-2">
+      <div className="flex flex-col items-center flex-1 w-full py-8  bg-light-slate-2">
         <div className="container px-2 mx-auto md:px-16">{children}</div>
-      </main>
+      </div>
     </>
   );
 };

layouts/lists.tsx

@@ -85,9 +85,9 @@ const ListPageLayout = ({
         </div>
       </div>
 
-      <main className="flex flex-col items-center flex-1 w-full py-8  bg-light-slate-2">
+      <div className="flex flex-col items-center flex-1 w-full py-8  bg-light-slate-2">
         <div className="container">{children}</div>
-      </main>
+      </div>
     </>
   );
 };

layouts/profile.tsx

@@ -8,7 +8,9 @@ const ProfileLayout = ({ children, showFooter = true }: { children: React.ReactN
     <div className="flex flex-col min-h-screen">
       <TopNav />
       <div className="page-container flex grow flex-col items-center pt-8 lg:pt-20 md:pt-14">
-        <main className="flex w-full flex-1 flex-col items-center bg-light-slate-2">{children}</main>
+        <main id="main" className="flex w-full flex-1 flex-col items-center bg-light-slate-2">
+          {children}
+        </main>
       </div>
       {showFooter ? <Footer /> : null}
     </div>

pages/404.tsx

@@ -47,7 +47,7 @@ export default function Custom404() {
         <div className="grid items-center justify-center place-content-start py-7 px-4 z-50 md:grid-flow-col  md:justify-between">
           <HeaderLogo />
         </div>
-        <main className="grid md:grid-cols-2 place-content-center py-6">
+        <main id="main" className="grid md:grid-cols-2 place-content-center py-6">
           <div className="text-center px-6 relative z-10">
             <h1 className="text-8xl font-bold mb-2">404</h1>
             <div className="text-3xl mb-2">uh oh page not found</div>

pages/500.tsx

@@ -17,7 +17,7 @@ export default function Custom500() {
         <div className="grid items-center justify-center place-content-start py-7 px-4 md:grid-flow-col  md:justify-between">
           <HeaderLogo />
         </div>
-        <main className="grid place-content-center p-6">
+        <main id="main" className="grid place-content-center p-6">
           <h1 className="text-8xl font-bold mb-2">500</h1>
           <div className="text-3xl mb-2">uh oh! looks like there&apos;s an issue with the pizza oven</div>
           <Link href="/" className="text-orange-600 hover:text-orange-500">

pages/_document.tsx

@@ -1,10 +1,12 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import { SkipLink } from "components/shared/SkipLink";
 
 export default function Document() {
   return (
     <Html style={{ "--top-nav-height": "3rem" }}>
       <Head />
       <body className="selection:bg-light-orange-8 selection:text-light-slate-12">
+        <SkipLink id="main" />
         <Main />
         <NextScript />
       </body>

pages/account-deleted.tsx

@@ -9,7 +9,7 @@ const AccountDeletedPage = () => {
       </Head>
       <div className="min-h-screen flex flex-col">
         <TopNav />
-        <main className="page-container flex flex-col m-4 pt-28 items-center">
+        <main id="main" className="page-container flex flex-col m-4 pt-28 items-center">
           <div className="info-container container w-full">
             <h1 className="text-2xl">Account Deleted</h1>
             <p>Your account has been deleted.</p>

pages/workspaces/[workspaceId]/contributors.tsx

@@ -91,7 +91,7 @@ export default function WorkspaceContributorsPage({ workspace }: WorkspaceContri
             <DayRangePicker onDayRangeChanged={(value) => setPage(Number(value))} />
           </div>
         </div>
-        <main className="py-8">
+        <div className="py-8">
           <ClientOnly>
             {data && contributors.length > 0 ? (
               <ContributorsList
@@ -110,7 +110,7 @@ export default function WorkspaceContributorsPage({ workspace }: WorkspaceContri
               </Card>
             )}
           </ClientOnly>
-        </main>
+        </div>
       </div>
     </WorkspaceLayout>
   );