From 3697582fc88f4a3d7fd5ee5f0307d640a3868fa9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E6=9C=88=E6=9E=AB?= <yeyuefeng699@qq.com>
Date: Wed, 1 Jul 2026 23:39:56 +0800
Subject: [PATCH 1/3] fix: add skip to content functionality for improved
 accessibility

---
 src/components/Header.astro | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 5b597266fb..eb20d1959e 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -189,7 +189,23 @@ const isActive = (path: string) => {
     });
   }
 
-  toggleNav();
+  function handleSkipToContent() {
+    const skipLink = document.getElementById("skip-to-content");
+    if (!skipLink) return;
+    skipLink.addEventListener("click", e => {
+      e.preventDefault();
+      const target = document.getElementById("main-content");
+      if (target) {
+        target.setAttribute("tabindex", "-1");
+        target.focus();
+        target.scrollIntoView({ behavior: "instant" });
+      }
+    });
+  }
 
+  toggleNav();
   document.addEventListener("astro:after-swap", toggleNav);
+
+  handleSkipToContent();
+  document.addEventListener("astro:after-swap", handleSkipToContent);
 </script>

From aaaf5e2a1e5f21423ece1d4bed021dfa3ed96a0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E6=9C=88=E6=9E=AB?= <yeyuefeng699@qq.com>
Date: Tue, 4 Aug 2026 12:49:28 +0800
Subject: [PATCH 2/3] fix: polish skip-to-content behavior and main spacing

- Guard skip link against modified clicks so new-tab opens still work
- Strip tabindex from <main> on blur
- Modify the scroll behavior from instant to smooth
- Add some margin to make the focus outline won't be covered.
- Beauty the outline style.
---
 src/components/Header.astro | 17 ++++++++++++++++-
 src/styles/global.css       |  3 +++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index eb20d1959e..9b494d34cf 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -193,12 +193,27 @@ const isActive = (path: string) => {
     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: "instant" });
+        target.scrollIntoView({ behavior: "smooth" });
       }
     });
   }
diff --git a/src/styles/global.css b/src/styles/global.css
index 262e0a1471..f7646da37f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -19,6 +19,9 @@
   [role="button"]:not(:disabled) {
     cursor: pointer;
   }
+  #main-content {
+    @apply outline-accent my-1 outline-offset-1 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-dashed;
+  }
 }
 
 @utility max-w-app {

From 32d30d13ca82d4180d2f8c2f809ea8ed5bace425 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E6=9C=88=E6=9E=AB?= <yeyuefeng699@qq.com>
Date: Wed, 5 Aug 2026 12:09:25 +0800
Subject: [PATCH 3/3] refactor: add margins for the affected pages

- Add extra margins for the pages without `Breadcrumb` and `BackButton`, instead of adding margin for all `main-content`s, making the outline of `main` not covered by `Header` and `Footer`.
---
 src/pages/404.astro   | 2 +-
 src/pages/index.astro | 2 +-
 src/styles/global.css | 6 ++----
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/pages/404.astro b/src/pages/404.astro
index b533a2aec9..9cd0c2986a 100644
--- a/src/pages/404.astro
+++ b/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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 49a3bf74ed..3c1e5f619e 100644
--- a/src/pages/index.astro
+++ b/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">
diff --git a/src/styles/global.css b/src/styles/global.css
index f7646da37f..f4396bd891 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -12,16 +12,14 @@
     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),
   [role="button"]:not(:disabled) {
     cursor: pointer;
   }
-  #main-content {
-    @apply outline-accent my-1 outline-offset-1 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-dashed;
-  }
 }
 
 @utility max-w-app {