From efb68bb8a18569aa23be1ceaca54f0d6b70de3aa Mon Sep 17 00:00:00 2001
From: KHAIRUL ARIF DANIAL <khaixd756@gmail.com>
Date: Wed, 5 Aug 2026 11:51:13 +0800
Subject: [PATCH] a11y: skip-to-main-content link in layout shell

---
 src/components/layout-shell.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/layout-shell.tsx b/src/components/layout-shell.tsx
index 001e6c8..e10e838 100644
--- a/src/components/layout-shell.tsx
+++ b/src/components/layout-shell.tsx
@@ -14,9 +14,17 @@ export function LayoutShell({ children }: { children: ReactNode }) {
     <PerformanceProvider>
       <ThemeProvider defaultTheme="dark">
         <div className="flex min-h-screen flex-col">
+          <a
+            href="#main-content"
+            className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-primary focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-primary-foreground"
+          >
+            Skip to main content
+          </a>
           <SiteHeader onOpenCommand={() => setOpen(true)} />
           <CommandMenu open={open} onOpenChange={setOpen} />
-          {children}
+          <main id="main-content" className="flex-1" tabIndex={-1}>
+            {children}
+          </main>
           <footer className="w-full border-t mt-16">
             {/* Stats row */}
             <div className="border-b border-border/50">