docs(nxdev): add skip to content shortcut (#9558)

nrwl · Mar 28, 2022 · c058c30 · c058c30 · vercel · Mar 28, 2022
1 parent 8b0f9d2
commit c058c30
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 3 deletions.
diff --git a/nx-dev/nx-dev/pages/[...segments].tsx b/nx-dev/nx-dev/pages/[...segments].tsx
@@ -85,7 +85,7 @@ export default function DocumentationPage({
   return (
     <>
       <Header isDocViewer={true} />
-      <main>
+      <main id="main" role="main">
         {vm.entryComponent}
         <button
           type="button"

diff --git a/nx-dev/nx-dev/pages/_app.tsx b/nx-dev/nx-dev/pages/_app.tsx
@@ -48,6 +48,14 @@ export default function CustomApp({ Component, pageProps }: AppProps) {
         <meta name="theme-color" content="#ffffff" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
+      <a
+        id="skip-to-content-link"
+        href="#main"
+        tabIndex={0}
+        className="bg-green-nx-base absolute top-3 left-8 -translate-y-24 rounded-md px-4 py-2 text-white transition focus:translate-y-0"
+      >
+        Skip to content
+      </a>
       <div className="documentation-app bg-white text-gray-700 antialiased">
         <Component {...pageProps} />
       </div>

diff --git a/nx-dev/nx-dev/pages/community.tsx b/nx-dev/nx-dev/pages/community.tsx
@@ -190,7 +190,7 @@ export function Community(props: CommunityProps): ReactComponentElement<any> {
         }}
       />
       <Header useDarkBackground={false} />
-      <main>
+      <main id="main" role="main">
         <div className="w-full">
           <article
             id="getting-started"

diff --git a/nx-dev/nx-dev/pages/conf.tsx b/nx-dev/nx-dev/pages/conf.tsx
@@ -37,6 +37,8 @@ export function ConfPage(): ReactComponentElement<any> {
       />
       <Header useDarkBackground={true} />
       <main
+        id="main"
+        role="main"
         style={{
           background: 'linear-gradient(180deg, #143055 0%, #0b1a2d 100%)',
         }}

diff --git a/nx-dev/nx-dev/pages/index.tsx b/nx-dev/nx-dev/pages/index.tsx
@@ -51,7 +51,7 @@ export function Index(): ReactComponentElement<any> {
       />
       <h1 className="sr-only">Next generation monorepo tool</h1>
       <Header useDarkBackground={false} />
-      <main role="main">
+      <main id="main" role="main">
         <div className="w-full">
           {/*INTRO COMPONENT*/}
           <header