fix: move focus to main content when skip-to-content is clicked (#665)

Author: hazuki-keatsu

src/components/Header.astro

@@ -189,7 +189,38 @@ const isActive = (path: string) => {
     });
   }
 
-  toggleNav();
+  function handleSkipToContent() {
+    const skipLink = document.getElementById("skip-to-content");
+    if (!skipLink) return;
+    skipLink.addEventListener("click", e => {
+      if (
+        e.defaultPrevented ||
+        e.metaKey ||
+        e.ctrlKey ||
+        e.shiftKey ||
+        e.button !== 0
+      )
+        return;
+      e.preventDefault();
+      const target = document.getElementById("main-content");
+      if (target) {
+        target.setAttribute("tabindex", "-1");
+        target.addEventListener(
+          "blur",
+          () => target.removeAttribute("tabindex"),
+          {
+            once: true,
+          }
+        );
+        target.focus();
+        target.scrollIntoView({ behavior: "smooth" });
+      }
+    });
+  }
 
+  toggleNav();
   document.addEventListener("astro:after-swap", toggleNav);
+
+  handleSkipToContent();
+  document.addEventListener("astro:after-swap", handleSkipToContent);
 </script>

src/pages/404.astro

@@ -16,7 +16,7 @@ const t = useTranslations(locale);
 
   <main
     id="main-content"
-    class="app-layout flex flex-1 items-center justify-center"
+    class="app-layout my-1 flex flex-1 items-center justify-center"
   >
     <div class="mb-14 flex flex-col items-center justify-center">
       <h1 class="text-accent text-9xl font-bold">404</h1>

src/pages/index.astro

@@ -31,7 +31,7 @@ const homePath = getRelativeLocaleUrl(locale, "");
     id="main-content"
     data-layout="index"
     data-home-path={homePath}
-    class="app-layout"
+    class="app-layout my-1"
   >
     <section id="hero" class="border-border border-b pt-8 pb-6">
       <h1 class="my-4 inline-block text-4xl font-bold sm:my-8 sm:text-5xl">

src/styles/global.css

@@ -12,7 +12,8 @@
     scrollbar-color: var(--color-muted) transparent;
   }
   a,
-  button {
+  button,
+  #main-content {
     @apply outline-accent outline-offset-1 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-dashed;
   }
   button:not(:disabled),