From 18ac5ba0799af06b2b736da9ee742126b0d4f7e9 Mon Sep 17 00:00:00 2001
From: propcgamer20-png <propcgamer20-png@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:33:05 +0000
Subject: [PATCH] a11y: add skip-to-content link

Adds a visually-hidden-until-focused 'Skip to content' link as the
first focusable element in the body, jumping to a new id="main-content"
on <main>. Follows the same sr-only/focus:not-sr-only Tailwind pattern
already used elsewhere in the codebase (dialog.tsx, sheet.tsx close
buttons).

Fixes #261
---
 src/app/layout.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3a0858d..0489c59 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -85,6 +85,12 @@ export default function RootLayout({
       )}
     >
       <body className="flex min-h-full flex-col">
+        <a
+          href="#main-content"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+        >
+          Skip to content
+        </a>
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
@@ -92,7 +98,9 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <Navbar />
-          <main className="flex flex-1 flex-col pt-14">{children}</main>
+          <main id="main-content" className="flex flex-1 flex-col pt-14">
+            {children}
+          </main>
           <Footer />
           <Toaster richColors position="top-center" />
           <PwaRegister />
