From 735e37cac63e498e33ec95e55eb5b8dcfd34f2af Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 28 Oct 2024 21:51:59 -0700
Subject: [PATCH] Implement "skip to main" button

---
 index.html |  2 ++
 script.js  | 10 ++++++++--
 style.css  | 13 +++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 4b7216f..9fb43c0 100644
--- a/index.html
+++ b/index.html
@@ -37,6 +37,8 @@
 </head>
 
 <body>
+  <a href="#" id="skip-to-main">Skip to main content</a>
+
   <header>
     <a href="/">
       <svg role="img" aria-labelledby="logo" width="24" height="24" viewBox="0 0 24 24" fill="#005ce6">
diff --git a/script.js b/script.js
index 862f4c8..79450b6 100644
--- a/script.js
+++ b/script.js
@@ -290,6 +290,12 @@ document.addEventListener('keydown', e => {
   }
 });
 
+/* Implement "skip to main" button */
+document.querySelector('#skip-to-main').addEventListener('click', e => {
+  e.preventDefault();
+  document.querySelector('main').querySelector('a')?.focus(); // Assumes first focusable element is always <a>
+});
+
 /* Implement client-side routing. Handles view logic for /home and /:post routes. */
 async function showPage(path) {
   // Determine which placeholders to show
@@ -390,8 +396,8 @@ function route(href) {
 /* Set event handlers for client-side routing. */
 globalThis.addEventListener('popstate', _ => showPage(location.pathname));
 document.addEventListener('click', e => {
-  if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
-    return; // Use default behavior if any keyboard modifier is applied to the click
+  if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target.id === 'skip-to-main') {
+    return; // Use default behavior if any keyboard modifier is applied to the click or it's a special link
   }
 
   const anchor = e.target.closest('a');
diff --git a/style.css b/style.css
index 6b7ccdf..7fd9960 100644
--- a/style.css
+++ b/style.css
@@ -77,6 +77,19 @@ form {
   position: relative;
 }
 
+#skip-to-main {
+  z-index: 1;
+  position: fixed;
+  top: 0;
+  left: -1000px;
+  padding: 8px;
+  background: white;
+
+  &:focus {
+    left: 0;
+  }
+}
+
 .visually-hidden {
   position: absolute;
   width: 1px;
-- 
2.47.3