From 12b82b932f278e5b771e08732c2dc6bcb0e44157 Mon Sep 17 00:00:00 2001
From: MorikawaSouma <lvzixun810519@gmail.com>
Date: Wed, 18 Mar 2026 18:12:52 +0800
Subject: [PATCH] a11y: Add skip to main content link for keyboard navigation

This adds a skip navigation link that allows keyboard users to bypass
the navigation and jump directly to the main content. The link is
visually hidden by default but becomes visible when focused.

This addresses WCAG 2.4.1 (Level A) - Bypass Blocks.

Related to #8360
---
 src/components/Layout/Page.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index aa39fe5fc2b..ab140adddf2 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -148,6 +148,12 @@ export function Page({
         routeTree={routeTree}
         breadcrumbs={breadcrumbs}
       />
+      {/* Skip to main content link for accessibility */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-white focus:dark:bg-gray-900 focus:text-primary focus:dark:text-primary-dark focus:p-3 focus:rounded focus:border focus:border-border focus:dark:border-border-dark">
+        Skip to main content
+      </a>
       <div
         className={cn(
           hasColumns &&
@@ -166,7 +172,7 @@ export function Page({
         )}
         {/* No fallback UI so need to be careful not to suspend directly inside. */}
         <Suspense fallback={null}>
-          <main className="min-w-0 isolate">
+          <main id="main-content" className="min-w-0 isolate">
             <article
               className="font-normal break-words text-primary dark:text-primary-dark"
               key={asPath}>