Implement skip link (#729)

denoland · Aug 21, 2024 · 6c8c7dc · 6c8c7dc
1 parent bb770e6
commit 6c8c7dc
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 8 deletions.
diff --git a/_components/Header.tsx b/_components/Header.tsx
@@ -7,7 +7,7 @@ export default function Header({
 }) {
   const reference = url.startsWith("/api");
   return (
-    <div
+    <header
       class={`bg-white shadow z-30 ${
         reference ? "" : "sticky top-0 left-0 right-0"
       }`}
@@ -127,7 +127,7 @@ export default function Header({
             </ul>
           </nav>
         )}
-    </div>
+    </header>
   );
 }
 

diff --git a/_includes/doc.tsx b/_includes/doc.tsx
@@ -103,7 +103,10 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
         class="absolute top-16 bottom-0 left-0 right-0 lg:left-74 overflow-y-auto lg:grid lg:grid-cols-7 lg:gap-8 max-w-screen-2xl mx-auto"
         style={{ scrollbarGutter: "stable" }}
       >
-        <main class="mx-auto max-w-screen-xl w-full pt-4 pb-8 flex flex-grow lg:col-span-5">
+        <main
+          id="content"
+          class="mx-auto max-w-screen-xl w-full pt-4 pb-8 flex flex-grow lg:col-span-5"
+        >
           <div class="flex-grow px-4 sm:px-5 md:px-6 max-w-full">
             <article class="max-w-[66ch] mx-auto">
               <Breadcrumbs

diff --git a/_includes/layout.tsx b/_includes/layout.tsx
@@ -39,6 +39,12 @@ export default function Layout(props: Lume.Data) {
         <link rel="preconnect" href="https://www.googletagmanager.com"></link>
       </head>
       <body class={reference ? "" : "h-dvh overflow-hidden"}>
+        <a
+          href="#content"
+          class="opacity-0 absolute top-2 left-2 p-2 border -translate-y-12 transition-all focus:translate-y-0 focus:opacity-100 z-50 bg-white font-bold"
+        >
+          Skip to main content <span aria-hidden="true">-&gt;</span>
+        </a>
         <props.comp.Header url={props.url} hasSidebar={!!props.sidebar} />
         {props.children}
       </body>

diff --git a/examples.page.tsx b/examples.page.tsx
@@ -67,7 +67,7 @@ export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
       title: `${example.parsed.title} - Deno by Example`,
       content: (
         <div>
-          <main class="max-w-screen-lg mx-auto p-4">
+          <main id="content" class="max-w-screen-lg mx-auto p-4">
             <div class="flex gap-2 items-center">
               <p
                 class="italic m-0 mr-2"
@@ -254,7 +254,10 @@ export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
     url: `/examples/`,
     title: `Deno by Example`,
     content: (
-      <div className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20">
+      <main
+        id="content"
+        className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
+      >
         <div className="pb-16 align-middle md:pb-0 w-full">
           <div className="mb-16 md:mb-24 text-center">
             <img
@@ -291,7 +294,7 @@ export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
             </p>
           </div>
         </div>
-      </div>
+      </main>
     ),
   };
 }

diff --git a/index.page.tsx b/index.page.tsx
@@ -36,7 +36,10 @@ export const sidebar = [
 
 export default function () {
   return (
-    <div class="flex flex-col px-8 pt-6 md:pt-12 mt-4 md:items-center md:justify-center max-w-[1200px] mx-auto mb-48">
+    <main
+      id="content"
+      class="flex flex-col px-8 pt-6 md:pt-12 mt-4 md:items-center md:justify-center max-w-[1200px] mx-auto mb-48"
+    >
       <div class="flex flex-col gap-4 md:gap-8 pb-16 align-middle md:pb-0">
         {/* Hero section */}
         <div class="grid grid-cols-1 md:grid-cols-3 mb-6 gap-4">
@@ -449,7 +452,7 @@ export default function () {
           </div>
         </div>
       </div>
-    </div>
+    </main>
   );
 }