From 32808a9b45db8a0f7c5d36ab8a7632d1c110c8bf Mon Sep 17 00:00:00 2001
From: Enniwealth <enikelvin5@gmail.com>
Date: Thu, 30 Jul 2026 05:42:55 +0100
Subject: [PATCH] New Updates #776

---
 docs/KEYBOARD_NAVIGATION.md                   | 140 ++++++++
 docs/contributing.md                          |   1 +
 .../accessibility/KeyboardNavigation.jsx      | 208 +++++++----
 src/components/accessibility/SkipLink.tsx     |  15 +
 src/components/dashboard/ConnectPanel.tsx     |  13 +
 src/components/layout/Sidebar.tsx             |   8 +-
 .../RealTimeNotificationCenter.tsx            |  34 +-
 src/hooks/useRouteFocus.ts                    |  37 ++
 src/hooks/useSidebarArrowNav.ts               |  54 +++
 src/lib/keyboardNavigationAudit.ts            | 340 ++++++++++++++++++
 src/routes/DashboardLayout.tsx                |  55 ++-
 tests/e2e/keyboard-navigation.spec.ts         | 158 ++++++++
 .../unit/lib/keyboardNavigationAudit.test.ts  | 149 ++++++++
 13 files changed, 1124 insertions(+), 88 deletions(-)
 create mode 100644 docs/KEYBOARD_NAVIGATION.md
 create mode 100644 src/components/accessibility/SkipLink.tsx
 create mode 100644 src/hooks/useRouteFocus.ts
 create mode 100644 src/hooks/useSidebarArrowNav.ts
 create mode 100644 src/lib/keyboardNavigationAudit.ts
 create mode 100644 tests/e2e/keyboard-navigation.spec.ts
 create mode 100644 tests/unit/lib/keyboardNavigationAudit.test.ts

diff --git a/docs/KEYBOARD_NAVIGATION.md b/docs/KEYBOARD_NAVIGATION.md
new file mode 100644
index 00000000..8493fadc
--- /dev/null
+++ b/docs/KEYBOARD_NAVIGATION.md
@@ -0,0 +1,140 @@
+# Keyboard Navigation Guide
+
+This document describes keyboard navigation behavior across all dashboard routes, how to test it, and compatibility notes for developers.
+
+## Overview
+
+Every dashboard route must be fully operable without a pointer. Keyboard users rely on:
+
+- Logical **Tab** order (skip link → sidebar → toolbar → main content)
+- **Arrow keys** in the sidebar navigation list
+- **Enter** / **Space** to activate buttons and links
+- **Escape** to dismiss overlays and return focus to the trigger
+- **Focus traps** inside modal dialogs (preferences, command palette, notifications)
+
+## Skip link
+
+The first focusable element on every page is **Skip to main content** (`.skip-link`). It moves focus to `#main-content`, which receives programmatic focus after route changes via `useRouteFocus`.
+
+## Global shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl/Cmd + K` | Open command palette |
+| `Ctrl/Cmd + /` or `?` | Show keyboard shortcuts help |
+| `G` then `D` | Go to Overview |
+| `G` then `A` | Go to Account |
+| `G` then `T` | Go to Transactions |
+| `G` then `C` | Go to Contracts |
+| `Escape` | Close open modals / overlays |
+
+Shortcuts are suppressed while focus is inside text inputs unless noted otherwise.
+
+## Sidebar navigation
+
+When the sidebar is visible:
+
+- **Arrow Up / Arrow Down** — move between nav items
+- **Home / End** — jump to first / last nav item
+- **Enter** — activate the focused route
+
+Implementation: `src/hooks/useSidebarArrowNav.ts`
+
+## Route focus management
+
+After navigating to a new tab or URL, focus moves to `#main-content` and a screen reader announcement is emitted. Implementation: `src/hooks/useRouteFocus.ts`
+
+## Modal focus traps
+
+Modals use `FocusManager` with `trapFocus` and `restoreFocusOnUnmount`:
+
+- Command palette (`KeyboardNavigation.jsx`)
+- Keyboard shortcuts help
+- User preferences (`DashboardLayout.tsx`)
+
+## Audit utilities
+
+`src/lib/keyboardNavigationAudit.ts` provides programmatic checks:
+
+```ts
+import {
+  auditRouteKeyboardNavigation,
+  DASHBOARD_ROUTES,
+  isKeyboardNavigationSupported,
+} from '../lib/keyboardNavigationAudit';
+
+const env = isKeyboardNavigationSupported();
+if (!env.supported) {
+  console.warn(env.reason); // SSR / non-browser
+}
+
+const result = auditRouteKeyboardNavigation('overview', document);
+console.log(result.passed, result.tabOrderIssues);
+```
+
+### Invalid input handling
+
+- Empty or whitespace route names return `supported: false` with reason `"Route path is empty or invalid"`.
+- Connect form sets `aria-invalid="true"` and `role="alert"` on validation errors.
+
+### Unsupported environments
+
+When `document` or `window` is unavailable (SSR, unit tests without DOM), audit functions return empty results and `environmentSupported: false` rather than throwing.
+
+## Dashboard routes covered
+
+All routes in `DASHBOARD_ROUTES` (`src/lib/keyboardNavigationAudit.ts`) must maintain keyboard operability, including:
+
+`connect`, `overview`, `account`, `transactions`, `contracts`, `network`, `builder`, `settings`, and 30+ additional tabs registered in `DashboardLayout.tsx`.
+
+## Testing
+
+### Unit tests
+
+```bash
+npm test -- tests/unit/lib/keyboardNavigationAudit.test.ts
+```
+
+Covers focusable element discovery, tab-order issues, modal trap detection, invalid route input, and environment detection.
+
+### End-to-end tests (Playwright)
+
+```bash
+npm run test:e2e -- tests/e2e/keyboard-navigation.spec.ts
+```
+
+| Test | Type | Description |
+|------|------|-------------|
+| Tab order → connect → sidebar nav | Primary | Full keyboard connect and route change |
+| Skip link focus | Boundary | Skip link targets main landmark |
+| Command palette | Boundary | Open/close via keyboard |
+| Invalid address | Failure | Error alert + recovery without pointer |
+| Preferences Escape | Failure | Focus restored to trigger button |
+| Per-route focusable check | Boundary | Each core route has focusable controls |
+
+## Security and compatibility notes
+
+- Keyboard shortcuts intentionally avoid browser-reserved combos (`Ctrl+T`, `Ctrl+W`, etc.) — see `src/lib/keyboard/shortcuts.ts` `detectBrowserConflicts()`.
+- Focus indicators use `:focus-visible` per WCAG 2.4.7 — see `src/styles/accessibility.css`.
+- High-contrast mode preserves focus ring visibility — see `docs/HIGH_CONTRAST_THEME.md`.
+
+## Migration notes
+
+If you add a new dashboard tab:
+
+1. Register it in `DashboardLayout.tsx` `TABS` and `Sidebar.tsx` `NAV_ITEMS`.
+2. Add the route id to `DASHBOARD_ROUTES` in `keyboardNavigationAudit.ts`.
+3. Ensure icon-only controls have `aria-label`.
+4. Wrap any new modal in `FocusManager` with focus restore on close.
+5. Add the route to `tests/e2e/keyboard-navigation.spec.ts` if it is user-facing.
+
+## Related files
+
+| File | Purpose |
+|------|---------|
+| `src/components/accessibility/SkipLink.tsx` | Skip-to-main link |
+| `src/components/accessibility/KeyboardNavigation.jsx` | Command palette + shortcuts |
+| `src/components/accessibility/FocusManager.tsx` | Modal focus trap |
+| `src/hooks/useRouteFocus.ts` | Post-navigation focus |
+| `src/hooks/useSidebarArrowNav.ts` | Sidebar arrow-key nav |
+| `tests/e2e/keyboard-navigation.spec.ts` | Playwright keyboard tests |
diff --git a/docs/contributing.md b/docs/contributing.md
index 7af36ecc..b420c35b 100644
--- a/docs/contributing.md
+++ b/docs/contributing.md
@@ -88,6 +88,7 @@ New utility/lib files that contain pure business logic should be `.ts`. React co
 - Use semantic HTML (`<nav>`, `<ul>`, `<button>`) over generic `<div>` + `onClick`.
 - Add `aria-label` to icon-only buttons.
 - Announce dynamic changes via `<ScreenReaderAnnouncer>` where appropriate.
+- See [Keyboard Navigation Guide](./KEYBOARD_NAVIGATION.md) for route focus, skip links, modal traps, and test requirements.
 
 ---
 
diff --git a/src/components/accessibility/KeyboardNavigation.jsx b/src/components/accessibility/KeyboardNavigation.jsx
index dd23d9bd..a5f5228a 100644
--- a/src/components/accessibility/KeyboardNavigation.jsx
+++ b/src/components/accessibility/KeyboardNavigation.jsx
@@ -6,6 +6,7 @@ import {
   addRecentAccount,
   getTransactionTemplates,
 } from "../../utils/accessibility";
+import FocusManager from "./FocusManager";
 import "../../styles/accessibility.css";
 
 /**
@@ -15,8 +16,17 @@ function CommandPalette({ isOpen, onClose }) {
   const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef(null);
+  const triggerRef = useRef(document.activeElement);
   const { setConnectedAddress, setActiveTab, setSelectedTemplateId } = useStore();
 
+  useEffect(() => {
+    if (isOpen) {
+      triggerRef.current = document.activeElement;
+    } else if (triggerRef.current instanceof HTMLElement) {
+      triggerRef.current.focus();
+    }
+  }, [isOpen]);
+
   const commands = [
     // Navigation
     { id: "nav-dashboard", label: "Go to Dashboard", category: "Navigation", action: () => setActiveTab("overview") },
@@ -107,6 +117,7 @@ function CommandPalette({ isOpen, onClose }) {
 
   return (
     <div
+      role="presentation"
       style={{
         position: "fixed",
         top: 0,
@@ -123,44 +134,57 @@ function CommandPalette({ isOpen, onClose }) {
       }}
       onClick={onClose}
     >
-      <div
-        style={{
-          background: "var(--bg-card)",
-          border: "1px solid var(--border-bright)",
-          borderRadius: "var(--radius-lg)",
-          width: "90%",
-          maxWidth: "600px",
-          maxHeight: "70vh",
-          overflow: "hidden",
-          boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
-        }}
-        onClick={(e) => e.stopPropagation()}
-      >
+      <FocusManager trapFocus restoreFocusOnUnmount returnFocusElement={triggerRef.current}>
         <div
-          style={{ padding: "16px", borderBottom: "1px solid var(--border)" }}
+          role="dialog"
+          aria-modal="true"
+          aria-label="Command palette"
+          style={{
+            background: "var(--bg-card)",
+            border: "1px solid var(--border-bright)",
+            borderRadius: "var(--radius-lg)",
+            width: "90%",
+            maxWidth: "600px",
+            maxHeight: "70vh",
+            overflow: "hidden",
+            boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
+          }}
+          onClick={(e) => e.stopPropagation()}
         >
-          <div style={{ position: 'relative' }}>
-            <span style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)', fontSize: '16px' }}>🔍</span>
-            <input
-              ref={inputRef}
-              type="text"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Search commands, pages, accounts..."
-              style={{
-                width: "100%",
-                background: "var(--bg-elevated)",
-                border: "1px solid var(--border)",
-                borderRadius: "var(--radius-md)",
-                padding: "12px 16px 12px 40px",
-                fontSize: "14px",
-                color: "var(--text-primary)",
-                outline: "none",
-              }}
-            />
+          <div
+            style={{ padding: "16px", borderBottom: "1px solid var(--border)" }}
+          >
+            <label htmlFor="command-palette-input" className="sr-only">
+              Search commands
+            </label>
+            <div style={{ position: 'relative' }}>
+              <span aria-hidden="true" style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)', fontSize: '16px' }}>🔍</span>
+              <input
+                id="command-palette-input"
+                ref={inputRef}
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Search commands, pages, accounts..."
+                aria-activedescendant={
+                  filteredCommands[selectedIndex]
+                    ? `command-option-${filteredCommands[selectedIndex].id}`
+                    : undefined
+                }
+                style={{
+                  width: "100%",
+                  background: "var(--bg-elevated)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "var(--radius-md)",
+                  padding: "12px 16px 12px 40px",
+                  fontSize: "14px",
+                  color: "var(--text-primary)",
+                  outline: "none",
+                }}
+              />
+            </div>
           </div>
-        </div>
 
         <div style={{ maxHeight: "calc(70vh - 130px)", overflowY: "auto" }}>
           {Object.entries(groupedCommands).map(([category, cmds]) => (
@@ -186,6 +210,10 @@ function CommandPalette({ isOpen, onClose }) {
                 return (
                   <div
                     key={cmd.id}
+                    id={`command-option-${cmd.id}`}
+                    role="option"
+                    aria-selected={isSelected}
+                    tabIndex={-1}
                     onClick={() => {
                       cmd.action();
                       onClose();
@@ -211,7 +239,7 @@ function CommandPalette({ isOpen, onClose }) {
           ))}
 
           {filteredCommands.length === 0 && (
-            <div style={{ padding: "48px 32px", textAlign: "center", color: "var(--text-muted)", fontSize: "14px" }}>
+            <div role="status" style={{ padding: "48px 32px", textAlign: "center", color: "var(--text-muted)", fontSize: "14px" }}>
               No matching commands found
             </div>
           )}
@@ -232,7 +260,8 @@ function CommandPalette({ isOpen, onClose }) {
           <span><kbd style={{ background: 'var(--bg-card)', padding: '2px 4px', borderRadius: '3px' }}>↵</kbd> Select</span>
           <span><kbd style={{ background: 'var(--bg-card)', padding: '2px 4px', borderRadius: '3px' }}>Esc</kbd> Close</span>
         </div>
-      </div>
+        </div>
+      </FocusManager>
     </div>
   );
 }
@@ -241,6 +270,27 @@ function CommandPalette({ isOpen, onClose }) {
  * Keyboard Shortcuts Help Modal
  */
 function ShortcutsHelp({ isOpen, onClose }) {
+  const triggerRef = useRef(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      triggerRef.current = document.activeElement;
+    } else if (triggerRef.current instanceof HTMLElement) {
+      triggerRef.current.focus();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape' || (e.key !== 'Shift' && e.key !== 'Control' && e.key !== 'Meta' && e.key !== 'Alt')) {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
   if (!isOpen) return null;
 
   const shortcuts = [
@@ -260,6 +310,7 @@ function ShortcutsHelp({ isOpen, onClose }) {
 
   return (
     <div
+      role="presentation"
       style={{
         position: "fixed",
         top: 0,
@@ -275,49 +326,55 @@ function ShortcutsHelp({ isOpen, onClose }) {
       }}
       onClick={onClose}
     >
-      <div
-        style={{
-          background: "var(--bg-card)",
-          border: "1px solid var(--border-bright)",
-          borderRadius: "var(--radius-lg)",
-          width: "90%",
-          maxWidth: "500px",
-          maxHeight: "85vh",
-          overflow: "hidden",
-          boxShadow: "0 20px 60px rgba(0, 0, 0, 0.6)",
-          display: 'flex',
-          flexDirection: 'column'
-        }}
-        onClick={(e) => e.stopPropagation()}
-      >
+      <FocusManager trapFocus restoreFocusOnUnmount returnFocusElement={triggerRef.current}>
         <div
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="shortcuts-help-title"
           style={{
-            padding: "20px 24px",
-            borderBottom: "1px solid var(--border)",
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            background: 'var(--bg-elevated)'
+            background: "var(--bg-card)",
+            border: "1px solid var(--border-bright)",
+            borderRadius: "var(--radius-lg)",
+            width: "90%",
+            maxWidth: "500px",
+            maxHeight: "85vh",
+            overflow: "hidden",
+            boxShadow: "0 20px 60px rgba(0, 0, 0, 0.6)",
+            display: 'flex',
+            flexDirection: 'column'
           }}
+          onClick={(e) => e.stopPropagation()}
         >
-          <h2 style={{ fontSize: "18px", fontWeight: 700, margin: 0, display: 'flex', alignItems: 'center', gap: '10px' }}>
-            <span>⌨️</span> Keyboard Shortcuts
-          </h2>
-          <button
-            onClick={onClose}
+          <div
             style={{
-              background: "none",
-              border: "none",
-              color: "var(--text-muted)",
-              cursor: "pointer",
-              fontSize: "24px",
-              padding: 0,
-              lineHeight: 1
+              padding: "20px 24px",
+              borderBottom: "1px solid var(--border)",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              background: 'var(--bg-elevated)'
             }}
           >
-            ×
-          </button>
-        </div>
+            <h2 id="shortcuts-help-title" style={{ fontSize: "18px", fontWeight: 700, margin: 0, display: 'flex', alignItems: 'center', gap: '10px' }}>
+              <span aria-hidden="true">⌨️</span> Keyboard Shortcuts
+            </h2>
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="Close keyboard shortcuts"
+              style={{
+                background: "none",
+                border: "none",
+                color: "var(--text-muted)",
+                cursor: "pointer",
+                fontSize: "24px",
+                padding: 0,
+                lineHeight: 1
+              }}
+            >
+              ×
+            </button>
+          </div>
 
         <div style={{ padding: "16px 24px", overflowY: 'auto' }}>
           {shortcuts.map((shortcut, idx) => (
@@ -356,9 +413,10 @@ function ShortcutsHelp({ isOpen, onClose }) {
         </div>
         
         <div style={{ padding: '16px 24px', background: 'var(--bg-elevated)', borderTop: '1px solid var(--border)', fontSize: '12px', color: 'var(--text-muted)', textAlign: 'center' }}>
-          Press any key to close this overlay.
+          Press Escape or any other key to close this overlay.
+        </div>
         </div>
-      </div>
+      </FocusManager>
     </div>
   );
 }
diff --git a/src/components/accessibility/SkipLink.tsx b/src/components/accessibility/SkipLink.tsx
new file mode 100644
index 00000000..7b098012
--- /dev/null
+++ b/src/components/accessibility/SkipLink.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { setFocus } from '../../utils/accessibility';
+
+export default function SkipLink() {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    setFocus('main-content');
+  };
+
+  return (
+    <a href="#main-content" className="skip-link" onClick={handleClick}>
+      Skip to main content
+    </a>
+  );
+}
diff --git a/src/components/dashboard/ConnectPanel.tsx b/src/components/dashboard/ConnectPanel.tsx
index 2c8ea05b..eb80e74f 100644
--- a/src/components/dashboard/ConnectPanel.tsx
+++ b/src/components/dashboard/ConnectPanel.tsx
@@ -262,7 +262,11 @@ export default function ConnectPanel() {
 
       <div style={{ width: '100%', maxWidth: isMobile ? '100%' : '540px' }}>
         <div style={inputContainerStyles}>
+          <label htmlFor="connect-address-input" className="sr-only">
+            Stellar account address
+          </label>
           <input
+            id="connect-address-input"
             value={input}
             onChange={(e) => {
               setInput(e.target.value)
@@ -270,10 +274,16 @@ export default function ConnectPanel() {
             }}
             onKeyDown={handleKeyDown}
             placeholder="G... public key, M... muxed, or name*domain"
+            aria-label="Stellar account address"
+            aria-invalid={error ? 'true' : 'false'}
+            aria-describedby={error ? 'connect-error' : undefined}
+            autoComplete="off"
             style={inputStyles}
           />
           <button
+            type="button"
             onClick={() => void handleConnect()}
+            aria-label="Connect to Stellar account"
             style={buttonStyles}
             onMouseEnter={(e) => {
               e.currentTarget.style.background = 'var(--cyan-dim)'
@@ -287,6 +297,9 @@ export default function ConnectPanel() {
         </div>
         {error && (
           <div
+            id="connect-error"
+            role="alert"
+            aria-live="polite"
             style={{
               marginTop: '8px',
               fontSize: '12px',
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 7985d826..d7db5268 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useStore } from '../../lib/store';
 import CopyableValue from '../dashboard/CopyableValue';
@@ -7,6 +7,7 @@ import { getActiveProfile } from '../../lib/userPreferences';
 import { preloadTab } from '../../hooks/usePreload';
 import { useAdaptiveComponents } from '../../hooks/useAdaptiveComponents';
 import { useExpertiseTracking } from '../../hooks/useExpertiseTracking';
+import { useSidebarArrowNav } from '../../hooks/useSidebarArrowNav';
 import ExpertiseBadge from '../expertise/ExpertiseBadge';
 import ExpertiseProgressPanel from '../expertise/ExpertiseProgressPanel';
 
@@ -118,6 +119,9 @@ export default function Sidebar({ isMobile = false }: SidebarProps) {
   const [activeProfileId, setActiveProfileId] = useState<string | null>(null);
   const [customHeaderName, setCustomHeaderName] = useState<string>('');
   const [customHeaderValue, setCustomHeaderValue] = useState<string>('');
+  const asideRef = useRef<HTMLElement>(null);
+
+  useSidebarArrowNav(asideRef, !isMobile || isMobileMenuOpen);
 
   useEffect(() => {
     if (network === 'custom') {
@@ -208,6 +212,7 @@ export default function Sidebar({ isMobile = false }: SidebarProps) {
       )}
 
       <aside
+        ref={asideRef}
         style={sidebarStyles}
         aria-label="Main navigation"
         id="sidebar"
@@ -410,6 +415,7 @@ export default function Sidebar({ isMobile = false }: SidebarProps) {
               return (
                 <li key={item.id} role="presentation">
                   <button
+                    type="button"
                     onClick={() => !isDisabled && item.id && handleNavClick(item.id)}
                     disabled={isDisabled}
                     className="touch-target"
diff --git a/src/components/notifications/RealTimeNotificationCenter.tsx b/src/components/notifications/RealTimeNotificationCenter.tsx
index 42c9d857..f275f2a4 100644
--- a/src/components/notifications/RealTimeNotificationCenter.tsx
+++ b/src/components/notifications/RealTimeNotificationCenter.tsx
@@ -1,9 +1,10 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import SmartNotificationCenter from './SmartNotificationCenter'
 import RealTimeNotification from './RealTimeNotification'
 import { useStore } from '../../lib/store'
 import { useSmartNotifications } from '../../hooks/useSmartNotifications'
 import { Sparkles } from 'lucide-react'
+import FocusManager from '../accessibility/FocusManager'
 
 /**
  * Slide-over panel listing every notification accumulated this session.
@@ -17,6 +18,24 @@ import { Sparkles } from 'lucide-react'
  */
 export default function RealTimeNotificationCenter({ open, onClose }) {
   const [smartMode, setSmartMode] = useState(true)
+  const triggerRef = useRef<Element | null>(null)
+
+  useEffect(() => {
+    if (open) {
+      triggerRef.current = document.activeElement
+    } else if (triggerRef.current instanceof HTMLElement) {
+      triggerRef.current.focus()
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [open, onClose])
 
   if (!open) return null
 
@@ -32,9 +51,11 @@ export default function RealTimeNotificationCenter({ open, onClose }) {
           zIndex: 1100,
         }}
       />
-      <aside
-        role="dialog"
-        aria-label="Real-time notifications"
+      <FocusManager trapFocus restoreFocusOnUnmount returnFocusElement={triggerRef.current}>
+        <aside
+          role="dialog"
+          aria-modal="true"
+          aria-label="Real-time notifications"
         style={{
           position: 'fixed',
           top: 0,
@@ -78,6 +99,8 @@ export default function RealTimeNotificationCenter({ open, onClose }) {
             <button
               type="button"
               onClick={() => setSmartMode(!smartMode)}
+              aria-label={smartMode ? 'Switch to classic notification view' : 'Switch to smart notification view'}
+              aria-pressed={smartMode}
               title={smartMode ? 'Switch to classic view' : 'Switch to smart view'}
               style={{
                 background: smartMode ? 'var(--cyan-glow-sm)' : 'transparent',
@@ -116,7 +139,8 @@ export default function RealTimeNotificationCenter({ open, onClose }) {
         </header>
 
         {smartMode ? <SmartView /> : <ClassicView />}
-      </aside>
+        </aside>
+      </FocusManager>
     </>
   )
 }
diff --git a/src/hooks/useRouteFocus.ts b/src/hooks/useRouteFocus.ts
new file mode 100644
index 00000000..2f6e7817
--- /dev/null
+++ b/src/hooks/useRouteFocus.ts
@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { setFocus } from '../utils/accessibility';
+import { announceToScreenReader } from '../utils/accessibility';
+
+const MAIN_CONTENT_ID = 'main-content';
+
+/**
+ * Moves keyboard focus to the main content region after route changes
+ * so screen reader and keyboard users skip repetitive navigation.
+ */
+export function useRouteFocus(activeTab?: string) {
+  const location = useLocation();
+  const previousPath = useRef(location.pathname);
+
+  useEffect(() => {
+    if (previousPath.current === location.pathname && !activeTab) return;
+
+    previousPath.current = location.pathname;
+
+    const main = document.getElementById(MAIN_CONTENT_ID);
+    if (!main) return;
+
+    // Defer until lazy tab content has mounted
+    const timer = window.setTimeout(() => {
+      setFocus(MAIN_CONTENT_ID);
+      const label = activeTab
+        ? activeTab.replace(/([A-Z])/g, ' $1').replace(/^./, (c) => c.toUpperCase())
+        : 'page';
+      announceToScreenReader(`Navigated to ${label}`);
+    }, 100);
+
+    return () => window.clearTimeout(timer);
+  }, [location.pathname, activeTab]);
+}
+
+export default useRouteFocus;
diff --git a/src/hooks/useSidebarArrowNav.ts b/src/hooks/useSidebarArrowNav.ts
new file mode 100644
index 00000000..f2a51fb6
--- /dev/null
+++ b/src/hooks/useSidebarArrowNav.ts
@@ -0,0 +1,54 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Enables ArrowUp/ArrowDown keyboard navigation within a sidebar nav list.
+ */
+export function useSidebarArrowNav(navRef: React.RefObject<HTMLElement>, enabled = true) {
+  const itemSelector = 'nav[aria-label="Dashboard sections"] button:not([disabled])';
+
+  useEffect(() => {
+    if (!enabled || !navRef.current) return;
+
+    const nav = navRef.current;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') {
+        return;
+      }
+
+      const items = Array.from(nav.querySelectorAll<HTMLButtonElement>(itemSelector));
+      if (items.length === 0) return;
+
+      const active = document.activeElement as HTMLButtonElement | null;
+      const currentIndex = active ? items.indexOf(active) : -1;
+
+      if (e.key === 'Home') {
+        e.preventDefault();
+        items[0]?.focus();
+        return;
+      }
+
+      if (e.key === 'End') {
+        e.preventDefault();
+        items[items.length - 1]?.focus();
+        return;
+      }
+
+      e.preventDefault();
+
+      let nextIndex: number;
+      if (e.key === 'ArrowDown') {
+        nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+      } else {
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+      }
+
+      items[nextIndex]?.focus();
+    };
+
+    nav.addEventListener('keydown', handleKeyDown);
+    return () => nav.removeEventListener('keydown', handleKeyDown);
+  }, [enabled, navRef]);
+}
+
+export default useSidebarArrowNav;
diff --git a/src/lib/keyboardNavigationAudit.ts b/src/lib/keyboardNavigationAudit.ts
new file mode 100644
index 00000000..0d9716ce
--- /dev/null
+++ b/src/lib/keyboardNavigationAudit.ts
@@ -0,0 +1,340 @@
+/**
+ * Keyboard navigation audit utilities for dashboard routes.
+ * Validates focus order, detect traps, and reports unsupported environments.
+ */
+
+export interface FocusableElementInfo {
+  tagName: string;
+  id: string;
+  role: string | null;
+  ariaLabel: string | null;
+  tabIndex: number;
+  isVisible: boolean;
+  rect: { top: number; left: number; width: number; height: number } | null;
+}
+
+export interface TabOrderIssue {
+  element: FocusableElementInfo;
+  reason: 'hidden' | 'negative-tabindex' | 'no-accessible-name' | 'out-of-viewport';
+  severity: 'error' | 'warning';
+}
+
+export interface KeyboardTrapInfo {
+  containerSelector: string;
+  focusableCount: number;
+  canEscape: boolean;
+}
+
+export interface RouteKeyboardAuditResult {
+  route: string;
+  supported: boolean;
+  unsupportedReason?: string;
+  focusableCount: number;
+  tabOrderIssues: TabOrderIssue[];
+  traps: KeyboardTrapInfo[];
+  hasSkipLink: boolean;
+  hasMainLandmark: boolean;
+  passed: boolean;
+}
+
+export interface KeyboardAuditSummary {
+  timestamp: number;
+  environmentSupported: boolean;
+  unsupportedReason?: string;
+  routes: RouteKeyboardAuditResult[];
+  totalIssues: number;
+  passed: boolean;
+}
+
+/** Dashboard routes that must support keyboard-only navigation. */
+export const DASHBOARD_ROUTES = [
+  'connect',
+  'overview',
+  'account',
+  'transactions',
+  'contracts',
+  'network',
+  'builder',
+  'faucet',
+  'compare',
+  'wallet',
+  'signer',
+  'portfolio',
+  'txBuilder',
+  'contractInteraction',
+  'contractABI',
+  'dex',
+  'liquidityPrediction',
+  'pathExplorer',
+  'explorers',
+  'realtime',
+  'charts',
+  'assets',
+  'multisig',
+  'analytics',
+  'designSystem',
+  'featureFlags',
+  'systemHealth',
+  'performance',
+  'logAnalyzer',
+  'settings',
+  'collaboration',
+  'audit',
+  'anchors',
+  'search',
+  'cacheStats',
+  'liveActivity',
+  'claimableBalances',
+  'dataExport',
+  'governance',
+  'monitoringDashboards',
+  'compliance',
+  'security',
+  'dependencyManagement',
+  'txAnalytics',
+  'anomalyViz',
+] as const;
+
+export type DashboardRoute = (typeof DASHBOARD_ROUTES)[number];
+
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+
+export function isKeyboardNavigationSupported(): { supported: boolean; reason?: string } {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return { supported: false, reason: 'DOM APIs are unavailable (SSR or non-browser environment)' };
+  }
+  if (typeof document.querySelector !== 'function') {
+    return { supported: false, reason: 'document.querySelector is unavailable' };
+  }
+  return { supported: true };
+}
+
+function isElementVisible(el: HTMLElement): boolean {
+  if (!el.getClientRects().length) return false;
+  const style = window.getComputedStyle(el);
+  if (style.visibility === 'hidden' || style.display === 'none') return false;
+  if (parseFloat(style.opacity) === 0) return false;
+  return true;
+}
+
+function getAccessibleName(el: HTMLElement): string | null {
+  const ariaLabel = el.getAttribute('aria-label');
+  if (ariaLabel?.trim()) return ariaLabel.trim();
+
+  const labelledBy = el.getAttribute('aria-labelledby');
+  if (labelledBy) {
+    const labelEl = document.getElementById(labelledBy);
+    if (labelEl?.textContent?.trim()) return labelEl.textContent.trim();
+  }
+
+  if (el.tagName === 'INPUT') {
+    const id = el.id;
+    if (id) {
+      const label = document.querySelector(`label[for="${CSS.escape(id)}"]`);
+      if (label?.textContent?.trim()) return label.textContent.trim();
+    }
+    const placeholder = el.getAttribute('placeholder');
+    if (placeholder?.trim()) return placeholder.trim();
+  }
+
+  const text = el.textContent?.trim();
+  return text || null;
+}
+
+export function getFocusableElements(root: ParentNode = document): FocusableElementInfo[] {
+  const env = isKeyboardNavigationSupported();
+  if (!env.supported) return [];
+
+  const elements = Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+
+  return elements.map((el) => {
+    const rect = el.getBoundingClientRect();
+    return {
+      tagName: el.tagName.toLowerCase(),
+      id: el.id || '',
+      role: el.getAttribute('role'),
+      ariaLabel: getAccessibleName(el),
+      tabIndex: el.tabIndex,
+      isVisible: isElementVisible(el),
+      rect: rect.width || rect.height ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height } : null,
+    };
+  });
+}
+
+export function auditTabOrder(root: ParentNode = document): TabOrderIssue[] {
+  const env = isKeyboardNavigationSupported();
+  if (!env.supported) return [];
+
+  const issues: TabOrderIssue[] = [];
+  const focusable = Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+
+  focusable.forEach((el) => {
+    const info: FocusableElementInfo = {
+      tagName: el.tagName.toLowerCase(),
+      id: el.id || '',
+      role: el.getAttribute('role'),
+      ariaLabel: getAccessibleName(el),
+      tabIndex: el.tabIndex,
+      isVisible: isElementVisible(el),
+      rect: null,
+    };
+
+    if (!info.isVisible) {
+      issues.push({ element: info, reason: 'hidden', severity: 'warning' });
+      return;
+    }
+
+    if (el.tabIndex < 0 && el.tagName !== 'BODY') {
+      // tabindex="-1" is valid for programmatic focus targets
+      if (el.getAttribute('tabindex') === '-1') return;
+      issues.push({ element: info, reason: 'negative-tabindex', severity: 'warning' });
+    }
+
+    const needsName =
+      el.tagName === 'BUTTON' ||
+      el.tagName === 'A' ||
+      el.getAttribute('role') === 'button' ||
+      el.getAttribute('role') === 'link';
+
+    if (needsName && !info.ariaLabel) {
+      issues.push({ element: info, reason: 'no-accessible-name', severity: 'error' });
+    }
+
+    const rect = el.getBoundingClientRect();
+    if (rect.bottom < 0 || rect.top > window.innerHeight) {
+      issues.push({ element: info, reason: 'out-of-viewport', severity: 'warning' });
+    }
+  });
+
+  return issues;
+}
+
+export function detectKeyboardTraps(root: ParentNode = document): KeyboardTrapInfo[] {
+  const env = isKeyboardNavigationSupported();
+  if (!env.supported) return [];
+
+  const traps: KeyboardTrapInfo[] = [];
+  const modalRoots = root.querySelectorAll<HTMLElement>('[role="dialog"], [aria-modal="true"]');
+
+  modalRoots.forEach((modal) => {
+    const focusable = modal.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+    const selector = modal.id ? `#${modal.id}` : modal.getAttribute('role') || 'dialog';
+    traps.push({
+      containerSelector: selector,
+      focusableCount: focusable.length,
+      canEscape: focusable.length > 0,
+    });
+  });
+
+  return traps;
+}
+
+export function auditRouteKeyboardNavigation(
+  route: string,
+  root: ParentNode = document,
+): RouteKeyboardAuditResult {
+  const env = isKeyboardNavigationSupported();
+  if (!env.supported) {
+    return {
+      route,
+      supported: false,
+      unsupportedReason: env.reason,
+      focusableCount: 0,
+      tabOrderIssues: [],
+      traps: [],
+      hasSkipLink: false,
+      hasMainLandmark: false,
+      passed: false,
+    };
+  }
+
+  if (!route.trim()) {
+    return {
+      route,
+      supported: false,
+      unsupportedReason: 'Route path is empty or invalid',
+      focusableCount: 0,
+      tabOrderIssues: [],
+      traps: [],
+      hasSkipLink: false,
+      hasMainLandmark: false,
+      passed: false,
+    };
+  }
+
+  const focusable = getFocusableElements(root);
+  const tabOrderIssues = auditTabOrder(root);
+  const traps = detectKeyboardTraps(root);
+  const hasSkipLink = Boolean(root.querySelector('.skip-link, [href="#main-content"]'));
+  const hasMainLandmark = Boolean(root.querySelector('main, [role="main"], #main-content'));
+
+  const errors = tabOrderIssues.filter((i) => i.severity === 'error');
+
+  return {
+    route,
+    supported: true,
+    focusableCount: focusable.filter((f) => f.isVisible).length,
+    tabOrderIssues,
+    traps,
+    hasSkipLink,
+    hasMainLandmark,
+    passed: errors.length === 0 && hasMainLandmark && focusable.filter((f) => f.isVisible).length > 0,
+  };
+}
+
+export function auditAllDashboardRoutes(root: ParentNode = document): KeyboardAuditSummary {
+  const env = isKeyboardNavigationSupported();
+  if (!env.supported) {
+    return {
+      timestamp: Date.now(),
+      environmentSupported: false,
+      unsupportedReason: env.reason,
+      routes: [],
+      totalIssues: 0,
+      passed: false,
+    };
+  }
+
+  const currentRoute = window.location.pathname.replace(/^\//, '') || 'connect';
+  const result = auditRouteKeyboardNavigation(currentRoute, root);
+  const totalIssues = result.tabOrderIssues.filter((i) => i.severity === 'error').length;
+
+  return {
+    timestamp: Date.now(),
+    environmentSupported: true,
+    routes: [result],
+    totalIssues,
+    passed: result.passed,
+  };
+}
+
+export function validateRouteName(route: string): route is DashboardRoute {
+  return (DASHBOARD_ROUTES as readonly string[]).includes(route);
+}
+
+/** Returns the next focusable element after the current active element. */
+export function getNextFocusableElement(
+  root: ParentNode = document,
+  reverse = false,
+): HTMLElement | null {
+  const env = isKeyboardNavigationSupported();
+  if (!env.supported) return null;
+
+  const focusable = Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
+    (el) => isElementVisible(el) && !el.hasAttribute('disabled'),
+  );
+
+  if (focusable.length === 0) return null;
+
+  const active = document.activeElement as HTMLElement | null;
+  const currentIndex = active ? focusable.indexOf(active) : -1;
+
+  if (reverse) {
+    const nextIndex = currentIndex <= 0 ? focusable.length - 1 : currentIndex - 1;
+    return focusable[nextIndex] ?? null;
+  }
+
+  const nextIndex = currentIndex >= focusable.length - 1 ? 0 : currentIndex + 1;
+  return focusable[nextIndex] ?? null;
+}
diff --git a/src/routes/DashboardLayout.tsx b/src/routes/DashboardLayout.tsx
index 21db8242..75cf6a9a 100644
--- a/src/routes/DashboardLayout.tsx
+++ b/src/routes/DashboardLayout.tsx
@@ -31,6 +31,8 @@ import UserPreferences from '../components/preferences/UserPreferences';
 import NetworkIndicator from '../components/layout/NetworkIndicator';
 import MobileNavigation from '../components/layout/MobileNavigation';
 import KeyboardNavigation from '../components/accessibility/KeyboardNavigation';
+import SkipLink from '../components/accessibility/SkipLink';
+import FocusManager from '../components/accessibility/FocusManager';
 import ThemeToggle from '../components/layout/ThemeToggle';
 import OfflineBanner from '../components/layout/OfflineBanner';
 import PWAInstallBanner from '../components/PWAInstallBanner';
@@ -40,6 +42,7 @@ import DevToolbar from '../components/dashboard/DevToolbar';
 import DebugAssistantButton from '../components/debug/DebugAssistantButton';
 import DebugAssistantPanel from '../components/debug/DebugAssistantPanel';
 import ConversationPanel from '../components/conversation/ConversationPanel';
+import { useRouteFocus } from '../hooks/useRouteFocus';
 
 interface SearchResult {
   type?: string;
@@ -242,6 +245,9 @@ export default function DashboardLayout() {
   const { level, isNovice, setLevel, updateSignals } = useExpertise();
   const [notificationsOpen, setNotificationsOpen] = useState<boolean>(false);
   const [conversationOpen, setConversationOpen] = useState<boolean>(false);
+  const preferencesTriggerRef = React.useRef<HTMLButtonElement>(null);
+
+  useRouteFocus(activeTab);
 
   useEffect(() => {
     // v2: full multi-layer cache initialization (warm, prune, SW bridge)
@@ -287,15 +293,21 @@ export default function DashboardLayout() {
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isMobileMenuOpen) {
-        setMobileMenuOpen(false);
-        addBreadcrumb('Mobile menu closed via escape key', 'user_action');
+      if (e.key === 'Escape') {
+        if (isMobileMenuOpen) {
+          setMobileMenuOpen(false);
+          addBreadcrumb('Mobile menu closed via escape key', 'user_action');
+        }
+        if (preferencesOpen) {
+          setPreferencesOpen(false);
+          preferencesTriggerRef.current?.focus();
+        }
       }
     };
 
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [isMobileMenuOpen, setMobileMenuOpen]);
+  }, [isMobileMenuOpen, setMobileMenuOpen, preferencesOpen, setPreferencesOpen]);
 
   useEffect(() => {
     if (isMobileMenuOpen) {
@@ -383,6 +395,7 @@ export default function DashboardLayout() {
 
   return (
     <ErrorBoundary onRetry={handleRetry} maxRetries={3}>
+      <SkipLink />
       <OfflineBanner />
       <PWAInstallBanner />
       <SWUpdatePrompt />
@@ -396,7 +409,13 @@ export default function DashboardLayout() {
       >
         {isMobile && <MobileHeader />}
         {isMobile ? <MobileSidebar /> : <Sidebar />}
-        <main style={getMainStyles()} ref={isMobile ? swipeAreaRef : null}>
+        <main
+          id="main-content"
+          tabIndex={-1}
+          aria-label="Dashboard content"
+          style={getMainStyles()}
+          ref={isMobile ? swipeAreaRef : null}
+        >
           <KeyboardNavigation />
           <div style={{ marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
             <div style={{ flex: 1 }}>
@@ -414,10 +433,15 @@ export default function DashboardLayout() {
               />
             </div>
             <button
+              ref={preferencesTriggerRef}
+              type="button"
               onClick={() => {
                 setPreferencesOpen(true);
                 trackFeatureInteraction('preferences');
               }}
+              aria-label="Open user preferences"
+              aria-haspopup="dialog"
+              aria-expanded={preferencesOpen}
               title="User Preferences"
               style={{
                 width: '36px',
@@ -524,6 +548,7 @@ export default function DashboardLayout() {
         <TipButton />
         {preferencesOpen && (
           <div
+            role="presentation"
             style={{
               position: 'fixed',
               inset: 0,
@@ -536,10 +561,26 @@ export default function DashboardLayout() {
               padding: '16px',
             }}
             onClick={(e) => {
-              if (e.target === e.currentTarget) setPreferencesOpen(false);
+              if (e.target === e.currentTarget) {
+                setPreferencesOpen(false);
+                preferencesTriggerRef.current?.focus();
+              }
             }}
           >
-            <UserPreferences onClose={() => setPreferencesOpen(false)} />
+            <FocusManager
+              trapFocus
+              restoreFocusOnUnmount
+              returnFocusElement={preferencesTriggerRef.current}
+            >
+              <div role="dialog" aria-modal="true" aria-label="User preferences">
+                <UserPreferences
+                  onClose={() => {
+                    setPreferencesOpen(false);
+                    preferencesTriggerRef.current?.focus();
+                  }}
+                />
+              </div>
+            </FocusManager>
           </div>
         )}
       </div>
diff --git a/tests/e2e/keyboard-navigation.spec.ts b/tests/e2e/keyboard-navigation.spec.ts
new file mode 100644
index 00000000..706640f8
--- /dev/null
+++ b/tests/e2e/keyboard-navigation.spec.ts
@@ -0,0 +1,158 @@
+import { test, expect, type Page } from '@playwright/test';
+
+const TESTNET_ACCOUNT = 'GAAZI4TCR3TY5OJHCTJC2A4QSY6CJWJH5IAJTGKIN2ER7LBNVKOCCWN';
+const INVALID_ADDRESS = 'NOT_A_VALID_KEY';
+
+async function mockHorizon(page: Page) {
+  await page.route('**/horizon**.stellar.org/**', async (route) => {
+    const url = route.request().url();
+    if (url.includes('/accounts/')) {
+      await route.fulfill({
+        status: 200,
+        json: {
+          account_id: TESTNET_ACCOUNT,
+          balances: [{ asset_type: 'native', balance: '10000.0000000' }],
+          sequence: '1',
+          thresholds: { low_threshold: 1, med_threshold: 1, high_threshold: 1 },
+          flags: { auth_required: false, auth_revocable: false, auth_immutable: false },
+        },
+      });
+    } else if (url.includes('/transactions')) {
+      await route.fulfill({ status: 200, json: { _embedded: { records: [] } } });
+    } else if (url.includes('/operations')) {
+      await route.fulfill({ status: 200, json: { _embedded: { records: [] } } });
+    } else {
+      await route.continue();
+    }
+  });
+
+  await page.route('**/api/v3/simple/price*', async (route) => {
+    await route.fulfill({ status: 200, json: { stellar: { usd: 0.1 } } });
+  });
+}
+
+async function connectAccount(page: Page) {
+  await page.getByLabel(/stellar account address/i).fill(TESTNET_ACCOUNT);
+  await page.getByRole('button', { name: /connect to stellar account/i }).click();
+  await expect(page.locator('#main-content')).toBeVisible({ timeout: 30000 });
+}
+
+test.describe('Keyboard navigation audit (#776)', () => {
+  test.beforeEach(async ({ page }) => {
+    await mockHorizon(page);
+    await page.addInitScript(() => {
+      localStorage.setItem('hasCompletedOnboarding', 'true');
+    });
+  });
+
+  test('primary flow: tab order reaches connect input, connects, and navigates sidebar', async ({
+    page,
+  }) => {
+    await page.goto('/connect');
+    await page.waitForLoadState('domcontentloaded');
+
+    // Skip link is first in tab order
+    await page.keyboard.press('Tab');
+    const skipLink = page.locator('.skip-link');
+    await expect(skipLink).toBeFocused();
+
+    // Tab to connect input and submit with Enter
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    const addressInput = page.getByLabel(/stellar account address/i);
+    await expect(addressInput).toBeFocused();
+    await addressInput.fill(TESTNET_ACCOUNT);
+    await page.keyboard.press('Enter');
+
+    await expect(page.locator('#main-content')).toBeVisible({ timeout: 30000 });
+
+    // Navigate to Account via sidebar keyboard activation
+    const accountNav = page.getByRole('button', { name: /^Account$/i }).first();
+    await accountNav.focus();
+    await page.keyboard.press('Enter');
+    await expect(page).toHaveURL(/\/account/);
+    await expect(page.locator('#main-content')).toBeFocused({ timeout: 5000 });
+  });
+
+  test('boundary case: skip link moves focus to main content landmark', async ({ page }) => {
+    await page.goto('/connect');
+    await connectAccount(page);
+
+    const skipLink = page.locator('.skip-link');
+    await skipLink.focus();
+    await page.keyboard.press('Enter');
+
+    await expect(page.locator('#main-content')).toBeFocused();
+  });
+
+  test('boundary case: command palette opens and closes with keyboard only', async ({ page }) => {
+    await page.goto('/connect');
+    await connectAccount(page);
+
+    await page.keyboard.press('Control+k');
+    await expect(page.getByRole('dialog', { name: /command palette/i })).toBeVisible();
+
+    await page.keyboard.press('Escape');
+    await expect(page.getByRole('dialog', { name: /command palette/i })).not.toBeVisible();
+  });
+
+  test('failure case: invalid address shows alert and keeps focus in form', async ({ page }) => {
+    await page.goto('/connect');
+
+    const addressInput = page.getByLabel(/stellar account address/i);
+    await addressInput.focus();
+    await addressInput.fill(INVALID_ADDRESS);
+    await page.keyboard.press('Enter');
+
+    const errorAlert = page.locator('#connect-error');
+    await expect(errorAlert).toBeVisible();
+    await expect(errorAlert).toHaveAttribute('role', 'alert');
+    await expect(addressInput).toHaveAttribute('aria-invalid', 'true');
+
+    // User can correct input without pointer
+    await addressInput.fill(TESTNET_ACCOUNT);
+    await page.keyboard.press('Enter');
+    await expect(page.locator('#main-content')).toBeVisible({ timeout: 30000 });
+  });
+
+  test('failure case: preferences dialog traps focus until Escape', async ({ page }) => {
+    await page.goto('/connect');
+    await connectAccount(page);
+
+    const prefsButton = page.getByRole('button', { name: /open user preferences/i });
+    await prefsButton.focus();
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('dialog', { name: /user preferences/i })).toBeVisible();
+
+    await page.keyboard.press('Escape');
+    await expect(page.getByRole('dialog', { name: /user preferences/i })).not.toBeVisible();
+    await expect(prefsButton).toBeFocused();
+  });
+
+  test.describe('dashboard route keyboard reachability', () => {
+    const routes = ['overview', 'account', 'transactions', 'settings', 'network'];
+
+    for (const route of routes) {
+      test(`${route}: main landmark and focusable controls are present`, async ({ page }) => {
+        await page.goto('/connect');
+        await connectAccount(page);
+        await page.goto(`/${route}`);
+        await page.waitForLoadState('domcontentloaded');
+
+        await expect(page.locator('main#main-content')).toBeVisible();
+
+        const focusableCount = await page.evaluate(() => {
+          const selector =
+            'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+          return document.querySelectorAll(selector).length;
+        });
+
+        expect(focusableCount).toBeGreaterThan(0);
+
+        await page.keyboard.press('Tab');
+        const activeTag = await page.evaluate(() => document.activeElement?.tagName);
+        expect(activeTag).toBeTruthy();
+      });
+    }
+  });
+});
diff --git a/tests/unit/lib/keyboardNavigationAudit.test.ts b/tests/unit/lib/keyboardNavigationAudit.test.ts
new file mode 100644
index 00000000..13bf4fa7
--- /dev/null
+++ b/tests/unit/lib/keyboardNavigationAudit.test.ts
@@ -0,0 +1,149 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import {
+  DASHBOARD_ROUTES,
+  auditRouteKeyboardNavigation,
+  auditTabOrder,
+  detectKeyboardTraps,
+  getFocusableElements,
+  getNextFocusableElement,
+  isKeyboardNavigationSupported,
+  validateRouteName,
+} from '../../../src/lib/keyboardNavigationAudit';
+
+function buildDom(html: string) {
+  document.body.innerHTML = html;
+}
+
+describe('keyboardNavigationAudit', () => {
+  beforeEach(() => {
+    buildDom('');
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('isKeyboardNavigationSupported', () => {
+    it('reports supported in jsdom', () => {
+      expect(isKeyboardNavigationSupported()).toEqual({ supported: true });
+    });
+  });
+
+  describe('validateRouteName', () => {
+    it('accepts known dashboard routes', () => {
+      expect(validateRouteName('overview')).toBe(true);
+      expect(validateRouteName('settings')).toBe(true);
+    });
+
+    it('rejects invalid route names', () => {
+      expect(validateRouteName('not-a-route')).toBe(false);
+      expect(validateRouteName('')).toBe(false);
+    });
+  });
+
+  describe('getFocusableElements', () => {
+    it('finds visible interactive elements in logical DOM order', () => {
+      buildDom(`
+        <main id="main-content">
+          <a href="#main-content" class="skip-link">Skip to content</a>
+          <button aria-label="Overview">Overview</button>
+          <input aria-label="Search" type="text" />
+        </main>
+      `);
+
+      const elements = getFocusableElements(document);
+      expect(elements.length).toBeGreaterThanOrEqual(3);
+      expect(elements[0]?.tagName).toBe('a');
+    });
+  });
+
+  describe('auditTabOrder', () => {
+    it('flags icon-only buttons missing accessible names', () => {
+      buildDom(`
+        <main>
+          <button></button>
+          <button aria-label="Settings">⚙</button>
+        </main>
+      `);
+
+      const issues = auditTabOrder(document);
+      expect(issues.some((i) => i.reason === 'no-accessible-name')).toBe(true);
+    });
+  });
+
+  describe('detectKeyboardTraps', () => {
+    it('identifies modal containers with focusable content', () => {
+      buildDom(`
+        <div role="dialog" aria-modal="true" id="prefs-modal">
+          <button aria-label="Close">Close</button>
+          <input aria-label="Username" type="text" />
+        </div>
+      `);
+
+      const traps = detectKeyboardTraps(document);
+      expect(traps).toHaveLength(1);
+      expect(traps[0]?.focusableCount).toBe(2);
+      expect(traps[0]?.canEscape).toBe(true);
+    });
+  });
+
+  describe('auditRouteKeyboardNavigation', () => {
+    it('passes a well-formed dashboard layout', () => {
+      buildDom(`
+        <a href="#main-content" class="skip-link">Skip to main content</a>
+        <nav aria-label="Main navigation">
+          <button aria-label="Overview">Overview</button>
+        </nav>
+        <main id="main-content" tabindex="-1">
+          <button aria-label="Connect account">Connect</button>
+        </main>
+      `);
+
+      const result = auditRouteKeyboardNavigation('connect', document);
+      expect(result.supported).toBe(true);
+      expect(result.hasSkipLink).toBe(true);
+      expect(result.hasMainLandmark).toBe(true);
+      expect(result.passed).toBe(true);
+    });
+
+    it('fails for invalid empty route input', () => {
+      const result = auditRouteKeyboardNavigation('   ', document);
+      expect(result.supported).toBe(false);
+      expect(result.unsupportedReason).toMatch(/invalid/i);
+      expect(result.passed).toBe(false);
+    });
+
+    it('fails when main landmark is missing', () => {
+      buildDom(`<button aria-label="Only control">Go</button>`);
+      const result = auditRouteKeyboardNavigation('overview', document);
+      expect(result.hasMainLandmark).toBe(false);
+      expect(result.passed).toBe(false);
+    });
+  });
+
+  describe('getNextFocusableElement', () => {
+    it('cycles forward through focusable elements', () => {
+      buildDom(`
+        <main>
+          <button id="first" aria-label="First">First</button>
+          <button id="second" aria-label="Second">Second</button>
+        </main>
+      `);
+
+      const first = document.getElementById('first') as HTMLButtonElement;
+      first.focus();
+
+      const next = getNextFocusableElement(document);
+      expect(next?.id).toBe('second');
+    });
+  });
+
+  describe('DASHBOARD_ROUTES', () => {
+    it('includes connect and core dashboard tabs', () => {
+      expect(DASHBOARD_ROUTES).toContain('connect');
+      expect(DASHBOARD_ROUTES).toContain('overview');
+      expect(DASHBOARD_ROUTES).toContain('settings');
+      expect(DASHBOARD_ROUTES.length).toBeGreaterThan(30);
+    });
+  });
+});