🎨 Palette: Add skip to main content link

.jules/palette.md

@@ -1,3 +1,3 @@
-## 2026-04-21 - Added UI focus states and semantic accessibility
-**Learning:** In React apps, dynamically changing states like loading indicators need `aria-live="polite"` to ensure screen readers announce them properly without being overly disruptive. Focus states are also often overlooked in generic styles.
-**Action:** Always check for `aria-live` on loading components and `focus-visible` on interactive elements during UI audits.
+## 2025-06-25 - Skip to Main Content Implementation
+**Learning:** React 19 apps using Tailwind CSS require careful skip-link focus management. When targeting a main content area with an `id`, ensuring the target element has `tabIndex={-1}` is critical for programmatic focus, but combining it with `focus:outline-none` prevents an unsightly visual focus ring on the entire container when sighted keyboard users trigger it.
+**Action:** When adding skip links, always apply `tabIndex={-1}` and `focus:outline-none` to the target `<main>` container to ensure semantic keyboard navigation without visual degradation.

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"
+      >
+        Skip to main content
+      </a>
       <Sidebar
         effectCategories={effectCategories}
         selectedEffect={selectedEffect}

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>
   );
 };