diff --git a/docs/components/NotFound.md b/docs/components/NotFound.md
new file mode 100644
index 0000000..7025b44
--- /dev/null
+++ b/docs/components/NotFound.md
@@ -0,0 +1,74 @@
+# NotFound Component
+
+The `NotFound` component is the application's 404 page. It helps users recover from broken or expired URLs — such as stale contract detail links — by providing quick navigation to the three primary sections of TalentTrust.
+
+## Overview
+
+This is a Next.js App Router page component located at `src/app/not-found.tsx`. It has no props and renders automatically whenever a route is not matched.
+
+## UI Sections
+
+### 1. Decorative 404
+
+A large `404` displayed purely for visual context. It is marked `aria-hidden="true"` so screen readers skip it.
+
+### 2. Heading and Description
+
+| Element | Content |
+|---|---|
+| `h1` | "Page Not Found" |
+| `<p>` | "This page doesn't exist or the link may have expired. Here are a few places to get back on track." |
+
+Copy follows the [Copywriting Guide](../COPYWRITING_GUIDE.md): direct, second-person, no technical jargon.
+
+### 3. Quick Links (`<nav>`)
+
+A `<nav aria-label="Quick links">` section with three links to the primary routes:
+
+| Label | Route | Description shown |
+|---|---|---|
+| View Contracts | `/contracts` | "Pick up where you left off" |
+| Track Milestones | `/milestones` | "See your project checkpoints" |
+| My Reputation | `/reputation` | "Check your work history" |
+
+### 4. Footer Actions
+
+| Label | Target |
+|---|---|
+| Go Home | `/` |
+| Contact Support | `mailto:support@talenttrust.io` |
+
+## Accessibility
+
+- **Heading hierarchy**: `h1` is the only top-level heading. The quick links section uses a visually hidden `h2` (`sr-only`) so screen reader users can navigate to it by heading.
+- **Landmark navigation**: `<nav aria-label="Quick links">` creates a named navigation landmark.
+- **Decorative content**: The `404` text has `aria-hidden="true"`.
+- **Focus states**: All links include `focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2` for visible keyboard focus indicators (WCAG 2.1 AA — Success Criterion 2.4.7).
+- **Keyboard navigation**: All interactive elements are native `<a>` elements, reachable via Tab in DOM order.
+
+## Responsive Behaviour
+
+- Quick links stack vertically on mobile; the separator (`—`) is hidden below `sm` breakpoint.
+- Footer action buttons stack vertically on mobile (`flex-col`) and sit side by side from `sm` upward (`sm:flex-row`).
+
+## Styling
+
+Uses Tailwind CSS utility classes consistent with the rest of the app. No custom CSS. Background uses the global CSS variable `--background`.
+
+## Testing
+
+Tests live in `src/app/not-found.test.tsx` and cover:
+
+| Test | What it verifies |
+|---|---|
+| `h1` heading renders | Correct heading level and text |
+| Descriptive paragraph | Recovery copy is present |
+| `aria-hidden` on 404 | Decorative element hidden from assistive tech |
+| `<nav>` landmark | Named navigation region exists |
+| Contracts link | `href="/contracts"` |
+| Milestones link | `href="/milestones"` |
+| Reputation link | `href="/reputation"` |
+| Go Home link | `href="/"` |
+| Contact Support link | `href="mailto:support@talenttrust.io"` |
+| All links keyboard reachable | All 5 links are `<a>` elements |
+| Snapshot | Regression guard on rendered output |
diff --git a/docs/components/SettingsPanel.md b/docs/components/SettingsPanel.md
new file mode 100644
index 0000000..cf96d04
--- /dev/null
+++ b/docs/components/SettingsPanel.md
@@ -0,0 +1,115 @@
+# SettingsPanel
+
+A full-screen drawer that lets users manage their TalentTrust preferences. Opened by `SettingsTrigger`. Fully accessible (WCAG 2.1 AA): implements dialog semantics, focus trap, Escape key handling, and focus restoration.
+
+---
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `isOpen` | `boolean` | Yes | Controls whether the panel is rendered and visible |
+| `onClose` | `() => void` | Yes | Callback invoked when the panel should close (Escape, backdrop click, Close button, Done button) |
+
+---
+
+## Usage
+
+```tsx
+import { SettingsTrigger } from '@/components/settings/SettingsTrigger';
+
+// SettingsTrigger manages isOpen state and renders SettingsPanel internally.
+// Place it once at the app/layout level.
+export default function Layout({ children }) {
+  return (
+    <>
+      {children}
+      <SettingsTrigger />
+    </>
+  );
+}
+```
+
+To use `SettingsPanel` standalone:
+
+```tsx
+import { useState } from 'react';
+import { SettingsPanel } from '@/components/settings/SettingsPanel';
+
+export function MyComponent() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open settings</button>
+      <SettingsPanel isOpen={open} onClose={() => setOpen(false)} />
+    </>
+  );
+}
+```
+
+---
+
+## Keyboard Interactions
+
+| Key | Action |
+|-----|--------|
+| `Tab` | Move focus to the next interactive element inside the panel. Wraps from the last element back to the first. |
+| `Shift + Tab` | Move focus to the previous interactive element. Wraps from the first element to the last. |
+| `Escape` | Close the panel and restore focus to the element that opened it. |
+| `Enter` / `Space` | Activate the focused button or toggle. |
+
+---
+
+## ARIA Attributes
+
+| Attribute | Value | Purpose |
+|-----------|-------|---------|
+| `role` | `"dialog"` | Identifies the drawer as a modal dialog to assistive technologies |
+| `aria-modal` | `"true"` | Tells screen readers that content behind the dialog is inert |
+| `aria-labelledby` | `"settings-panel-title"` | Associates the dialog with its visible "Settings" heading |
+
+---
+
+## Focus Management
+
+### On open
+- The close button (`aria-label="Close settings"`) receives focus immediately, so keyboard users know where they are.
+
+### Focus trap
+- `Tab` and `Shift+Tab` are intercepted via a `keydown` listener on `document`. Focus cycles through all non-disabled focusable elements inside the dialog and never reaches the page behind it.
+
+### On close
+- Managed by `SettingsTrigger`: a `useRef` holds a reference to the gear-icon trigger button. After the panel unmounts, `requestAnimationFrame` restores focus to that button, satisfying WCAG 2.4.3 Focus Order.
+
+---
+
+## Preferences Managed
+
+| Preference | Options |
+|------------|---------|
+| Theme | `light` / `dark` / `system` |
+| Currency Display | `usd` / `ngn` / `compact` |
+| Toast Density | `relaxed` / `compact` |
+| Quiet Mode | on / off (toggle) |
+
+Preferences are persisted to `localStorage` under the key `talenttrust-user-preferences` via the `usePreferences` hook (`@/lib/preferences`).
+
+---
+
+## Testing
+
+Tests live in `src/components/settings/__tests__/SettingsPanel.test.tsx` and cover:
+
+- Visibility (renders nothing when closed, renders when open)
+- All preference interactions and localStorage persistence
+- Close via button, backdrop, Done button, and Escape key
+- Dialog ARIA attributes (`role`, `aria-modal`, `aria-labelledby`)
+- Focus trap (Tab wraps forward, Shift+Tab wraps backward)
+- Initial focus on close button when panel opens
+- `focus-visible` ring classes on all interactive controls
+
+Run:
+
+```bash
+npm test -- --testPathPattern=SettingsPanel
+```
diff --git a/src/app/__snapshots__/not-found.test.tsx.snap b/src/app/__snapshots__/not-found.test.tsx.snap
new file mode 100644
index 0000000..a0bc1ec
--- /dev/null
+++ b/src/app/__snapshots__/not-found.test.tsx.snap
@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotFound page matches snapshot 1`] = `
+<main
+  class="min-h-screen flex flex-col items-center justify-center p-8 bg-[var(--background)]"
+>
+  <div
+    class="max-w-md w-full text-center space-y-8"
+  >
+    <div
+      aria-hidden="true"
+      class="text-6xl font-bold text-gray-200"
+    >
+      404
+    </div>
+    <div
+      class="space-y-3"
+    >
+      <h1
+        class="text-2xl font-bold text-gray-900"
+      >
+        Page Not Found
+      </h1>
+      <p
+        class="text-gray-600"
+      >
+        This page doesn't exist or the link may have expired. Here are a few places to get back on track.
+      </p>
+    </div>
+    <nav
+      aria-label="Quick links"
+    >
+      <h2
+        class="sr-only"
+      >
+        Where would you like to go?
+      </h2>
+      <ul
+        class="flex flex-col gap-3"
+      >
+        <li>
+          <a
+            class="flex flex-col items-center sm:flex-row sm:items-center gap-1 sm:gap-3 px-5 py-3 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2"
+            href="/contracts"
+          >
+            <span
+              class="font-medium text-gray-900"
+            >
+              View Contracts
+            </span>
+            <span
+              class="hidden sm:inline text-gray-400"
+            >
+              —
+            </span>
+            <span
+              class="text-sm text-gray-500"
+            >
+              Pick up where you left off
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            class="flex flex-col items-center sm:flex-row sm:items-center gap-1 sm:gap-3 px-5 py-3 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2"
+            href="/milestones"
+          >
+            <span
+              class="font-medium text-gray-900"
+            >
+              Track Milestones
+            </span>
+            <span
+              class="hidden sm:inline text-gray-400"
+            >
+              —
+            </span>
+            <span
+              class="text-sm text-gray-500"
+            >
+              See your project checkpoints
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            class="flex flex-col items-center sm:flex-row sm:items-center gap-1 sm:gap-3 px-5 py-3 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2"
+            href="/reputation"
+          >
+            <span
+              class="font-medium text-gray-900"
+            >
+              My Reputation
+            </span>
+            <span
+              class="hidden sm:inline text-gray-400"
+            >
+              —
+            </span>
+            <span
+              class="text-sm text-gray-500"
+            >
+              Check your work history
+            </span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <div
+      class="flex flex-col sm:flex-row gap-3 justify-center"
+    >
+      <a
+        class="px-5 py-2 rounded-lg bg-gray-900 text-white font-medium hover:bg-gray-700 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2"
+        href="/"
+      >
+        Go Home
+      </a>
+      <a
+        class="px-5 py-2 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-100 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2"
+        href="mailto:support@talenttrust.io"
+      >
+        Contact Support
+      </a>
+    </div>
+  </div>
+</main>
+`;
diff --git a/src/app/not-found.test.tsx b/src/app/not-found.test.tsx
index 434e2fe..dbdbc55 100644
--- a/src/app/not-found.test.tsx
+++ b/src/app/not-found.test.tsx
@@ -2,10 +2,73 @@ import { render, screen } from '@testing-library/react';
 import NotFound from './not-found';
 
 describe('NotFound page', () => {
-  it('renders 404 heading and navigation links', () => {
+  beforeEach(() => {
     render(<NotFound />);
-    expect(screen.getByRole('heading', { name: /page not found/i })).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: /go home/i })).toHaveAttribute('href', '/');
-    expect(screen.getByRole('link', { name: /contact support/i })).toBeInTheDocument();
+  });
+
+  it('renders the h1 heading', () => {
+    expect(
+      screen.getByRole('heading', { level: 1, name: /page not found/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the descriptive paragraph', () => {
+    expect(
+      screen.getByText(/this page doesn't exist or the link may have expired/i),
+    ).toBeInTheDocument();
+  });
+
+  it('renders 404 as decorative and hidden from assistive technology', () => {
+    const decorative = screen.getByText('404');
+    expect(decorative).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('renders the quick links nav with an accessible label', () => {
+    expect(screen.getByRole('navigation', { name: /quick links/i })).toBeInTheDocument();
+  });
+
+  it('renders a link to /contracts', () => {
+    expect(
+      screen.getByRole('link', { name: /view contracts/i }),
+    ).toHaveAttribute('href', '/contracts');
+  });
+
+  it('renders a link to /milestones', () => {
+    expect(
+      screen.getByRole('link', { name: /track milestones/i }),
+    ).toHaveAttribute('href', '/milestones');
+  });
+
+  it('renders a link to /reputation', () => {
+    expect(
+      screen.getByRole('link', { name: /my reputation/i }),
+    ).toHaveAttribute('href', '/reputation');
+  });
+
+  it('renders the Go Home link pointing to /', () => {
+    expect(screen.getByRole('link', { name: /go home/i })).toHaveAttribute(
+      'href',
+      '/',
+    );
+  });
+
+  it('renders the Contact Support link', () => {
+    expect(
+      screen.getByRole('link', { name: /contact support/i }),
+    ).toHaveAttribute('href', 'mailto:support@talenttrust.io');
+  });
+
+  it('all links are keyboard reachable (rendered as anchor elements)', () => {
+    const links = screen.getAllByRole('link');
+    // Go Home, Contact Support + 3 quick links = 5
+    expect(links.length).toBe(5);
+    links.forEach((link) => {
+      expect(link.tagName).toBe('A');
+    });
+  });
+
+  it('matches snapshot', () => {
+    const { container } = render(<NotFound />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index cff882c..f48e4ca 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,24 +1,67 @@
 import Link from 'next/link';
 
+const quickLinks = [
+  {
+    href: '/contracts',
+    label: 'View Contracts',
+    description: 'Pick up where you left off',
+  },
+  {
+    href: '/milestones',
+    label: 'Track Milestones',
+    description: 'See your project checkpoints',
+  },
+  {
+    href: '/reputation',
+    label: 'My Reputation',
+    description: 'Check your work history',
+  },
+];
+
 export default function NotFound() {
   return (
     <main className="min-h-screen flex flex-col items-center justify-center p-8 bg-[var(--background)]">
-      <div className="max-w-md w-full text-center space-y-6">
-        <div className="text-6xl font-bold text-gray-200">404</div>
-        <h1 className="text-2xl font-bold text-gray-900">Page Not Found</h1>
-        <p className="text-gray-600">
-          The page you&apos;re looking for doesn&apos;t exist or has been moved.
-        </p>
+      <div className="max-w-md w-full text-center space-y-8">
+        <div aria-hidden="true" className="text-6xl font-bold text-gray-200">
+          404
+        </div>
+
+        <div className="space-y-3">
+          <h1 className="text-2xl font-bold text-gray-900">Page Not Found</h1>
+          <p className="text-gray-600">
+            This page doesn&apos;t exist or the link may have expired. Here are
+            a few places to get back on track.
+          </p>
+        </div>
+
+        <nav aria-label="Quick links">
+          <h2 className="sr-only">Where would you like to go?</h2>
+          <ul className="flex flex-col gap-3">
+            {quickLinks.map(({ href, label, description }) => (
+              <li key={href}>
+                <Link
+                  href={href}
+                  className="flex flex-col items-center sm:flex-row sm:items-center gap-1 sm:gap-3 px-5 py-3 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2"
+                >
+                  <span className="font-medium text-gray-900">{label}</span>
+                  <span className="hidden sm:inline text-gray-400">—</span>
+                  <span className="text-sm text-gray-500">{description}</span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+
         <div className="flex flex-col sm:flex-row gap-3 justify-center">
           <Link
             href="/"
-            className="px-5 py-2 rounded-lg bg-gray-900 text-white font-medium hover:bg-gray-700 transition-colors"
+            className="px-5 py-2 rounded-lg bg-gray-900 text-white font-medium hover:bg-gray-700 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2"
           >
             Go Home
           </Link>
           <a
             href="mailto:support@talenttrust.io"
-            className="px-5 py-2 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-100 transition-colors"
+            className="px-5 py-2 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-100 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2"
           >
             Contact Support
           </a>
diff --git a/src/components/settings/SettingsPanel.tsx b/src/components/settings/SettingsPanel.tsx
index cc67e39..4e02aba 100644
--- a/src/components/settings/SettingsPanel.tsx
+++ b/src/components/settings/SettingsPanel.tsx
@@ -1,8 +1,11 @@
 'use client';
 
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { usePreferences, Theme, AmountFormat, ToastDensity } from '@/lib/preferences';
 
+const FOCUSABLE_SELECTORS =
+  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
 interface SettingsPanelProps {
   isOpen: boolean;
   onClose: () => void;
@@ -10,21 +13,61 @@ interface SettingsPanelProps {
 
 export function SettingsPanel({ isOpen, onClose }: SettingsPanelProps) {
   const { preferences, updatePreference } = usePreferences();
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const panel = panelRef.current;
+    if (!panel) return;
+
+    // Set initial focus to the close button
+    const closeBtn = panel.querySelector<HTMLElement>('[aria-label="Close settings"]');
+    closeBtn?.focus();
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+        return;
+      }
+      if (e.key === 'Tab') {
+        const els = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS));
+        if (els.length === 0) return;
+        const first = els[0];
+        const last = els[els.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
 
   if (!isOpen) return null;
 
   return (
     <div className="fixed inset-0 z-50 flex justify-end overflow-hidden">
       {/* Backdrop */}
-      <div 
+      <div
         className="absolute inset-0 bg-black/50 transition-opacity backdrop-blur-sm"
         onClick={onClose}
       />
 
       {/* Drawer */}
-      <div className="relative w-full max-w-md bg-[var(--background)] shadow-xl flex flex-col h-full border-l border-[var(--border)]">
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="settings-panel-title"
+        className="relative w-full max-w-md bg-[var(--background)] shadow-xl flex flex-col h-full border-l border-[var(--border)]"
+      >
         <div className="flex items-center justify-between p-6 border-b border-[var(--border)]">
-          <h2 className="text-xl font-bold text-[var(--foreground)]">Settings</h2>
+          <h2 id="settings-panel-title" className="text-xl font-bold text-[var(--foreground)]">Settings</h2>
           <button 
             onClick={onClose}
             className="p-2 rounded-full hover:bg-[var(--accent)] text-[var(--muted-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--primary)] focus-visible:ring-offset-2"
diff --git a/src/components/settings/SettingsTrigger.tsx b/src/components/settings/SettingsTrigger.tsx
index 537c1a0..5898586 100644
--- a/src/components/settings/SettingsTrigger.tsx
+++ b/src/components/settings/SettingsTrigger.tsx
@@ -1,14 +1,21 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { SettingsPanel } from './SettingsPanel';
 
 export function SettingsTrigger() {
   const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    requestAnimationFrame(() => triggerRef.current?.focus());
+  };
 
   return (
     <>
       <button
+        ref={triggerRef}
         onClick={() => setIsOpen(true)}
         className="fixed bottom-6 right-6 p-3 rounded-full bg-[var(--primary)] text-[var(--primary-foreground)] shadow-lg hover:scale-110 transition-transform z-40 focus:outline-none focus:ring-2 focus:ring-[var(--ring)] focus:ring-offset-2"
         aria-label="Open Settings"
@@ -34,7 +41,7 @@ export function SettingsTrigger() {
         </svg>
       </button>
 
-      <SettingsPanel isOpen={isOpen} onClose={() => setIsOpen(false)} />
+      <SettingsPanel isOpen={isOpen} onClose={handleClose} />
     </>
   );
 }
diff --git a/src/components/settings/__tests__/SettingsPanel.test.tsx b/src/components/settings/__tests__/SettingsPanel.test.tsx
index 7efe227..6d03274 100644
--- a/src/components/settings/__tests__/SettingsPanel.test.tsx
+++ b/src/components/settings/__tests__/SettingsPanel.test.tsx
@@ -177,4 +177,70 @@ describe('SettingsPanel', () => {
       expect(el.className).toMatch(/focus-visible/);
     });
   });
+
+  // --- Accessibility: dialog semantics ---
+
+  it('has role="dialog" when open', () => {
+    renderWithProvider(<SettingsPanel isOpen={true} onClose={() => {}} />);
+    expect(screen.getByRole('dialog')).toBeDefined();
+  });
+
+  it('has aria-modal="true" on the dialog', () => {
+    renderWithProvider(<SettingsPanel isOpen={true} onClose={() => {}} />);
+    expect(screen.getByRole('dialog').getAttribute('aria-modal')).toBe('true');
+  });
+
+  it('aria-labelledby points to the "Settings" heading', () => {
+    renderWithProvider(<SettingsPanel isOpen={true} onClose={() => {}} />);
+    const dialog = screen.getByRole('dialog');
+    const labelId = dialog.getAttribute('aria-labelledby');
+    expect(labelId).toBeTruthy();
+    const heading = document.getElementById(labelId!);
+    expect(heading).not.toBeNull();
+    expect(heading!.textContent).toBe('Settings');
+  });
+
+  // --- Accessibility: keyboard interactions ---
+
+  it('closes when Escape is pressed', () => {
+    const onClose = jest.fn();
+    renderWithProvider(<SettingsPanel isOpen={true} onClose={onClose} />);
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('sets initial focus on the close button when opened', () => {
+    renderWithProvider(<SettingsPanel isOpen={true} onClose={() => {}} />);
+    expect(document.activeElement).toBe(
+      screen.getByRole('button', { name: /close settings/i })
+    );
+  });
+
+  it('Tab on the last focusable element wraps focus to the first', () => {
+    renderWithProvider(<SettingsPanel isOpen={true} onClose={() => {}} />);
+    const dialog = screen.getByRole('dialog');
+    const focusable = Array.from(
+      dialog.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    );
+    const last = focusable[focusable.length - 1];
+    last.focus();
+    fireEvent.keyDown(document, { key: 'Tab', shiftKey: false });
+    expect(document.activeElement).toBe(focusable[0]);
+  });
+
+  it('Shift+Tab on the first focusable element wraps focus to the last', () => {
+    renderWithProvider(<SettingsPanel isOpen={true} onClose={() => {}} />);
+    const dialog = screen.getByRole('dialog');
+    const focusable = Array.from(
+      dialog.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    );
+    const first = focusable[0];
+    first.focus();
+    fireEvent.keyDown(document, { key: 'Tab', shiftKey: true });
+    expect(document.activeElement).toBe(focusable[focusable.length - 1]);
+  });
 });