feat: add skip-to-content link to improve accessability (#985)

xoxys · web-flow · commit b6d6abe23933 · 2025-03-01T23:00:36.000+01:00
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -22,6 +22,10 @@
   </head>
 
   <body itemscope itemtype="https://schema.org/WebPage">
+    <div class="w-full flex justify-center">
+      <a href="#main-content" id="gdoc-to-main" class="gdoc-markdown__link">Skip to main content</a>
+    </div>
+
     {{ partial "svg-icon-symbols" . }}
 
 
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -4,6 +4,7 @@
 
   <article
     class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.geekdocAlign | lower) }}"
+    id="main-content" tabindex="-1"
   >
     <h1>{{ partial "utils/title" . }}</h1>
     {{ partial "utils/content" . }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -4,6 +4,7 @@
 
   <article
     class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.geekdocAlign | lower) }}"
+    id="main-content" tabindex="-1"
   >
     <h1>{{ partial "utils/title" . }}</h1>
     {{ partial "page-metadata" . }}
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
@@ -1,4 +1,5 @@
 {{ define "main" }}
+  <div id="main-content" tabindex="-1">
   {{ range .Paginator.Pages }}
     <article class="gdoc-post">
       <header class="gdoc-post__header">
@@ -31,6 +32,7 @@ <h1 class="gdoc-post__title">
       </footer>
     </article>
   {{ end }}
+  </div>
   {{ partial "pagination.html" . }}
 {{ end }}
 
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
@@ -1,4 +1,5 @@
 {{ define "main" }}
+  <div id="main-content" tabindex="-1">
   {{ range .Paginator.Pages.ByTitle }}
     <article class="gdoc-post">
       <header class="gdoc-post__header">
@@ -28,5 +29,6 @@ <h1 class="gdoc-post__title">
       </footer>
     </article>
   {{ end }}
+  </div>
   {{ partial "pagination.html" . }}
 {{ end }}
diff --git a/layouts/posts/list.html b/layouts/posts/list.html
@@ -1,4 +1,5 @@
 {{ define "main" }}
+  <div id="main-content" tabindex="-1">
   {{ range .Paginator.Pages }}
     <article class="gdoc-markdown gdoc-post">
       <header class="gdoc-post__header">
@@ -29,6 +30,7 @@ <h1 class="gdoc-post__title">
       </footer>
     </article>
   {{ end }}
+  </div>
   {{ partial "pagination.html" . }}
 {{ end }}
 
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <article class="gdoc-post">
+  <article class="gdoc-post" id="main-content" tabindex="-1">
     <header class="gdoc-post__header">
       <h1 class="gdoc-post__title">{{ partial "utils/title" . }}</h1>
       <div class="flex flex-wrap align-center gdoc-post__meta gdoc-post__meta--head">
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
@@ -105,6 +105,24 @@ body {
   * {
     box-sizing: inherit;
   }
+
+  #gdoc-to-main {
+    position: absolute;
+    margin: defaults.$padding-8 0;
+    padding: defaults.$padding-8;
+
+    display: inline-block;
+    background-color: var(--accent-color-lite);
+    border-radius: defaults.$border-radius;
+    border: defaults.$border-1 solid var(--accent-color);
+
+    transform: translateY(0);
+    transition: transform 250ms ease-in;
+
+    &:not(:focus) {
+      transform: translateY(-#{defaults.$padding-64});
+    }
+  }
 }
 
 h1,
diff --git a/src/sass/_utils.scss b/src/sass/_utils.scss
@@ -101,3 +101,7 @@
   display: inline-block;
   min-width: 4rem;
 }
+
+.w-full {
+  width: 100%;
+}

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`
`5`	`5`	`<article`
`6`	`6`	`class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.geekdocAlign \| lower) }}"`
	`7`	`+ id="main-content" tabindex="-1"`
`7`	`8`	`>`
`8`	`9`	`<h1>{{ partial "utils/title" . }}</h1>`
`9`	`10`	`{{ partial "utils/content" . }}`
Original file line number	Diff line number	Diff line change
`@@ -101,3 +101,7 @@`
`101`	`101`	`display: inline-block;`
`102`	`102`	`min-width: 4rem;`
`103`	`103`	`}`
	`104`	`+`
	`105`	`+.w-full {`
	`106`	`+ width: 100%;`
	`107`	`+}`