From c81a97ff05c41b3de500716131309db5659977e9 Mon Sep 17 00:00:00 2001
From: Cheng Jiawei <297675118+weijietan09@users.noreply.github.com>
Date: Mon, 31 Aug 2026 02:26:41 +0800
Subject: [PATCH] a11y: add skip-to-content link in AppShell

---
 frontend/src/components/layout/AppShell.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/layout/AppShell.tsx b/frontend/src/components/layout/AppShell.tsx
index c44e282e..6e34d50c 100644
--- a/frontend/src/components/layout/AppShell.tsx
+++ b/frontend/src/components/layout/AppShell.tsx
@@ -6,11 +6,17 @@ import { BackgroundLayer } from './BackgroundLayer'
 export function AppShell() {
   return (
     <div className="flex h-screen overflow-hidden bg-background text-foreground" data-app-shell>
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground"
+      >
+        Skip to main content
+      </a>
       <BackgroundLayer />
       <Sidebar />
       <div className="flex flex-1 flex-col overflow-hidden">
         <Header />
-        <main className="flex-1 overflow-y-auto">
+        <main id="main-content" className="flex-1 overflow-y-auto" tabIndex={-1}>
           <Outlet />
         </main>
       </div>