Fix app shell keyboard accessibility

apps/web/src/components/AppShell.tsx

@@ -264,6 +264,9 @@ export function AppShell({ children }: AppShellProps) {
       <OnboardingProvider>
       <ChoosePathWizard />
       <div className="flex flex-col h-screen">
+        <a href="#main-content" className="sam-skip-link">
+          Skip to main content
+        </a>
         <header className="relative z-30 flex items-center justify-between px-4 py-2 glass-chrome glass-panel-container glass-composited border-x-0 border-t-0 after:content-[''] after:absolute after:bottom-0 after:left-[10%] after:right-[10%] after:h-0.5 after:bg-[radial-gradient(ellipse_at_center,var(--sam-chrome-accent-glow)_0%,transparent_70%)] after:blur-[1px] after:pointer-events-none">
           {/* Title on the left */}
           <Link to="/dashboard">
@@ -290,7 +293,7 @@ export function AppShell({ children }: AppShellProps) {
           </div>
         </header>
 
-        <main className="sam-main-content flex-1 min-h-0 overflow-y-auto overflow-x-hidden flex flex-col min-w-0">
+        <main id="main-content" tabIndex={-1} className="sam-main-content flex-1 min-h-0 overflow-y-auto overflow-x-hidden flex flex-col min-w-0">
           {children ?? <Outlet />}
         </main>
 
@@ -331,6 +334,9 @@ export function AppShell({ children }: AppShellProps) {
       className="grid h-screen overflow-hidden transition-[grid-template-columns] duration-200 ease-out motion-reduce:transition-none"
       style={{ gridTemplateColumns: `${navWidthForMode(focusMode)}px 1fr`, gridTemplateRows: 'minmax(0, 1fr) auto' }}
     >
+      <a href="#main-content" className="sam-skip-link">
+        Skip to main content
+      </a>
       {/* Announce Focus Mode changes to assistive tech (mode is cycled via the
           "F" key or the toggle, so screen readers need a live region). */}
       <div aria-live="polite" className="sr-only">
@@ -450,7 +456,7 @@ export function AppShell({ children }: AppShellProps) {
         </aside>
       )}
 
-      <main className="sam-main-content flex-1 overflow-y-auto overflow-x-hidden flex flex-col min-w-0" style={{ gridRow: '1' }}>
+      <main id="main-content" tabIndex={-1} className="sam-main-content flex-1 overflow-y-auto overflow-x-hidden flex flex-col min-w-0" style={{ gridRow: '1' }}>
         {children ?? <Outlet />}
       </main>
 

apps/web/src/index.css

@@ -112,6 +112,31 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+
+  :where(a, button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
+    outline: 2px solid var(--sam-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .sam-skip-link {
+    position: fixed;
+    top: 0.75rem;
+    left: 0.75rem;
+    z-index: 1000;
+    transform: translateY(calc(-100% - 1rem));
+    border: 1px solid var(--sam-color-focus-ring);
+    border-radius: var(--sam-radius-sm);
+    background: var(--sam-color-bg-surface);
+    color: var(--sam-color-fg-primary);
+    padding: 0.625rem 0.875rem;
+    box-shadow: var(--sam-shadow-overlay);
+    text-decoration: none;
+    transition: transform 0.15s ease;
+  }
+
+  .sam-skip-link:focus-visible {
+    transform: translateY(0);
+  }
 }
 
 /* ── SAM-specific utility (not replaceable by Tailwind) ── */

apps/web/tests/unit/AppShell.test.tsx

@@ -108,6 +108,16 @@ describe('AppShell (global context)', () => {
     expect(screen.getByTestId('page-content')).toBeInTheDocument();
   });
 
+  it('provides a skip link to the main content region for keyboard users', () => {
+    renderAppShell();
+    const skipLink = screen.getByRole('link', { name: 'Skip to main content' });
+    expect(skipLink).toHaveAttribute('href', '#main-content');
+
+    const main = screen.getByRole('main');
+    expect(main).toHaveAttribute('id', 'main-content');
+    expect(main).toHaveAttribute('tabindex', '-1');
+  });
+
   it('renders primary navigation with Home, Projects, Settings', () => {
     renderAppShell();
     expect(screen.getByRole('navigation', { name: 'Primary navigation' })).toBeInTheDocument();