Add main content skip link to website (#727)

Co-authored-by: vvveebs <[email protected]>
bridgetownrb · Mar 14, 2023 · 0561a33 · 0561a33
1 parent e535c9c
commit 0561a33
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/bridgetown-website/frontend/styles/global.css b/bridgetown-website/frontend/styles/global.css
@@ -428,3 +428,17 @@ svg.logo .letter {
 .version-text {
   color: var(--sl-color-neutral-300);
 }
+
+skip-to-main-content-bar {
+  position: absolute;
+  transform: translateY(-150px);
+  padding: 0.7rem 0;
+  background-color: var(--color-lightest-orange);
+  display: flex;
+  justify-content: center;
+
+  &:focus-within {
+    position: static;
+    transform: initial;
+  }
+}
diff --git a/bridgetown-website/src/_layouts/default.serb b/bridgetown-website/src/_layouts/default.serb
@@ -4,11 +4,15 @@
     {%@ "head" %}
   </head>
   <body class="{{ data.layout }} {{ data.page_class }}">
+    <skip-to-main-content-bar>
+      <a href="#main">Skip to main content</a>
+    </skip-to-main-content-bar>
+
     <theme-picker></theme-picker>
 
     {%@ Shared::Navbar metadata: site.metadata, resource: resource %}
 
-    <main>
+    <main id="main">
       {%= yield %}
     </main>