From d33c474b5709afd6b477a1415006947770e2d49e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 15 Jun 2026 16:38:37 +0000
Subject: [PATCH] Add skip to main content link for keyboard accessibility

This adds a visually hidden "Skip to main content" link that becomes visible
when focused via keyboard navigation, allowing screen reader and keyboard
users to bypass the sidebar navigation.

Co-authored-by: ELO2026X <153048533+ELO2026X@users.noreply.github.com>
---
 src/App.tsx                    | 6 ++++++
 src/components/ContentView.tsx | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4538c5e..ed2771b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -67,6 +67,12 @@ function App() {
 
   return (
     <div className="flex h-screen bg-gray-900 text-white">
+      <a
+        href="#main-content"
+        className="sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:z-50 focus-visible:p-4 focus-visible:bg-blue-600 focus-visible:text-white rounded-br-md"
+      >
+        Skip to main content
+      </a>
       <Sidebar
         effectCategories={effectCategories}
         selectedEffect={selectedEffect}
diff --git a/src/components/ContentView.tsx b/src/components/ContentView.tsx
index 2e65555..04a8285 100644
--- a/src/components/ContentView.tsx
+++ b/src/components/ContentView.tsx
@@ -36,7 +36,7 @@ export const ContentView: React.FC<ContentViewProps> = ({
   console.log(`[ContentView] Rendering effect: ${selectedEffect || 'None'}, isLoading: ${isLoading}`);
 
   return (
-    <div className="flex-1 flex flex-col p-4">
+    <main id="main-content" tabIndex={-1} className="flex-1 flex flex-col p-4 focus:outline-none">
       <div className="flex justify-between items-center mb-4">
         <h1 className="text-2xl font-bold">
           {effectData ? effectData.name : 'Select an Effect'}
@@ -100,6 +100,6 @@ export const ContentView: React.FC<ContentViewProps> = ({
           )}
         </div>
       </div>
-    </div>
+    </main>
   );
 };