From 922d6283f8678be37fcb34e665f8e261db2cd9e5 Mon Sep 17 00:00:00 2001
From: Jake Mason <dev.jakemason@gmail.com>
Date: Mon, 16 Jan 2023 22:22:23 -0500
Subject: [PATCH] Jump to content link for a11y

---
 src/rawdata/scss/_core.scss           | 28 +++++++++++++++++++++++++++
 src/templates/src/include/header.html |  3 ++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/rawdata/scss/_core.scss b/src/rawdata/scss/_core.scss
index b66c5acd..69c88580 100644
--- a/src/rawdata/scss/_core.scss
+++ b/src/rawdata/scss/_core.scss
@@ -769,3 +769,31 @@ footer {
   @include usevar(background-color, background-even-background);
   @include usevar(--fade-color, background-even-background);
 }
+
+.sr-only {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  word-wrap: normal !important;
+  transition: 0.2s all;
+}
+
+.sr-focusable {
+  @extend .sr-only;
+
+  &:focus {
+    padding: 15px 10px;
+    height: auto;
+    width: auto;
+    background: var(--content-background);
+    clip: initial;
+    clip-path: initial;
+    z-index: 99999;
+  }
+}
diff --git a/src/templates/src/include/header.html b/src/templates/src/include/header.html
index c90668fb..de97eb75 100644
--- a/src/templates/src/include/header.html
+++ b/src/templates/src/include/header.html
@@ -1,4 +1,5 @@
 <header id="site-header" class="mb3 bb bw1 b--theme-dark">
+    <a href="#content-start" class="sr-focusable" id="content-jump">Jump to Content</a>
     <div class="user-options flex justify-center justify-end-ns relative">
         {{ if .User }}
             {{ if .User.IsStaff }}
@@ -96,7 +97,7 @@
         </div>
     </div>
 </header>
-
+<div id="content-start"></div>
 <script type="text/javascript">
     document.addEventListener("DOMContentLoaded", function() {
         const header = document.querySelector('#site-header');