diff --git a/options/options.css b/options/options.css
index b20ae31..7d20bb8 100644
--- a/options/options.css
+++ b/options/options.css
@@ -196,7 +196,6 @@ h1 {
 .tab-navigation {
   display: flex;
   flex-direction: column;
-  gap: 4px;
   padding: 8px;
   background: var(--bg-secondary);
   border-right: 1px solid var(--border-color);
@@ -208,6 +207,12 @@ h1 {
   scrollbar-width: thin;
 }
 
+.tab-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
 .sidebar-header {
   padding: 16px 16px 12px;
   margin-bottom: 8px;
@@ -284,11 +289,14 @@ h1 {
 
 /* Tab Panels */
 .tab-panel {
-  display: none;
   animation: fadeIn 0.2s ease-in;
 }
 
-.tab-panel.active {
+.tab-panel[hidden] {
+  display: none;
+}
+
+.tab-panel:not([hidden]) {
   display: block;
 }
 
@@ -321,6 +329,11 @@ h1 {
     padding: 4px;
   }
 
+  .tab-list {
+    flex-direction: row;
+    min-width: max-content;
+  }
+
   .tab-button {
     flex-direction: column;
     gap: 4px;
@@ -862,6 +875,8 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 .setup-step.clickable {
   cursor: pointer;
+  color: inherit;
+  text-decoration: none;
 }
 
 .setup-step:hover {
@@ -910,6 +925,11 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   transform: none;
 }
 
+.setup-step.clickable:focus-visible {
+  outline: 2px solid var(--link-color);
+  outline-offset: 2px;
+}
+
 .step-all-content {
   flex: 1;
 }
@@ -2921,4 +2941,3 @@ body.dark-mode .setup-btn:hover {
     padding: 20px 0 15px;
   }
 }
-
diff --git a/options/options.html b/options/options.html
index 5f42b28..cf1a154 100644
--- a/options/options.html
+++ b/options/options.html
@@ -8,52 +8,54 @@
 </head>
 <body>
   <div class="container">
-    <nav class="tab-navigation" role="navigation" aria-label="Settings tabs">
+    <nav class="tab-navigation" aria-label="Settings">
       <div class="sidebar-header">
         <h2>Settings</h2>
       </div>
-      <button class="tab-button active" data-tab="setup" aria-selected="true">
-        <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
-        </svg>
-        <span>Setup</span>
-      </button>
-      <button class="tab-button" data-tab="repositories" aria-selected="false">
-        <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
-        </svg>
-        <span>Repositories</span>
-      </button>
-      <button class="tab-button" data-tab="filters" aria-selected="false">
-        <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
-        </svg>
-        <span>Activity Filters</span>
-      </button>
-      <button class="tab-button" data-tab="preferences" aria-selected="false">
-        <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
-        </svg>
-        <span>Appearance & Behavior</span>
-      </button>
-      <button class="tab-button" data-tab="advanced" aria-selected="false">
-        <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-        </svg>
-        <span>Advanced</span>
-      </button>
-      <button class="tab-button" data-tab="help" aria-selected="false">
-        <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-        </svg>
-        <span>Help</span>
-      </button>
+      <div class="tab-list" role="tablist" aria-label="Settings sections" aria-orientation="vertical">
+        <button class="tab-button active" type="button" id="tab-setup" role="tab" data-tab="setup" aria-selected="true" aria-controls="panel-setup" tabindex="0">
+          <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
+          </svg>
+          <span>Setup</span>
+        </button>
+        <button class="tab-button" type="button" id="tab-repositories" role="tab" data-tab="repositories" aria-selected="false" aria-controls="panel-repositories" tabindex="-1">
+          <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+          </svg>
+          <span>Repositories</span>
+        </button>
+        <button class="tab-button" type="button" id="tab-filters" role="tab" data-tab="filters" aria-selected="false" aria-controls="panel-filters" tabindex="-1">
+          <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
+          </svg>
+          <span>Activity Filters</span>
+        </button>
+        <button class="tab-button" type="button" id="tab-preferences" role="tab" data-tab="preferences" aria-selected="false" aria-controls="panel-preferences" tabindex="-1">
+          <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
+          </svg>
+          <span>Appearance & Behavior</span>
+        </button>
+        <button class="tab-button" type="button" id="tab-advanced" role="tab" data-tab="advanced" aria-selected="false" aria-controls="panel-advanced" tabindex="-1">
+          <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+          </svg>
+          <span>Advanced</span>
+        </button>
+        <button class="tab-button" type="button" id="tab-help" role="tab" data-tab="help" aria-selected="false" aria-controls="panel-help" tabindex="-1">
+          <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+          <span>Help</span>
+        </button>
+      </div>
     </nav>
 
     <div class="content-wrapper">
     <!-- Tab Panel 1: Setup -->
-    <div class="tab-panel active" data-tab="setup">
+    <div class="tab-panel" id="panel-setup" role="tabpanel" data-tab="setup" aria-labelledby="tab-setup">
     <section class="section">
       <h2>Getting Started</h2>
       <p class="help-text">Follow these steps to set up GitHub DevWatch</p>
@@ -104,29 +106,29 @@ <h3>Create a GitHub Token</h3>
           </div>
         </div>
 
-        <div class="setup-step clickable" data-tab="repositories">
+        <a class="setup-step clickable" href="#repositories" data-tab="repositories">
           <div class="step-number">2</div>
           <div class="step-content">
             <h3>Add Repositories</h3>
             <p>Go to the <strong>Repositories</strong> tab to add repositories you want to monitor. You can add them manually or import from your GitHub account.</p>
           </div>
-        </div>
+        </a>
 
-        <div class="setup-step clickable" data-tab="filters">
+        <a class="setup-step clickable" href="#filters" data-tab="filters">
           <div class="step-number">3</div>
           <div class="step-content">
             <h3>Configure Filters</h3>
             <p>Visit the <strong>Activity Filters</strong> tab to choose which types of activity you want to see (Pull Requests, Issues, Releases) and enable notifications.</p>
           </div>
-        </div>
+        </a>
 
-        <div class="setup-step clickable" data-tab="help">
+        <a class="setup-step clickable" href="#help" data-tab="help">
           <div class="step-number">4</div>
           <div class="step-content">
             <h3>View Help & Changelog</h3>
             <p>Visit the <strong>Help</strong> tab to find documentation, support resources, and the changelog to see what's new in the latest version.</p>
           </div>
-        </div>
+        </a>
       </div>
 
       <div class="info-box info-box-compact">
@@ -141,7 +143,7 @@ <h3>View Help & Changelog</h3>
     </div>
 
     <!-- Tab Panel 2: Repositories -->
-    <div class="tab-panel" data-tab="repositories">
+    <div class="tab-panel" id="panel-repositories" role="tabpanel" data-tab="repositories" aria-labelledby="tab-repositories" hidden>
     <section class="section" id="repositories">
       <!-- Add New Repository Card -->
       <div class="repo-section-card add-repo-card">
@@ -263,7 +265,7 @@ <h2>Your Watched Repositories <span class="repo-count-badge" id="repoCountBadge"
     </div>
 
     <!-- Tab Panel 3: Activity Filters -->
-    <div class="tab-panel" data-tab="filters">
+    <div class="tab-panel" id="panel-filters" role="tabpanel" data-tab="filters" aria-labelledby="tab-filters" hidden>
     <section class="section" id="filters">
       <h2>Activity Filters & Notifications</h2>
       <p class="help-text">Choose which types of activity to show and get notified about</p>
@@ -372,7 +374,7 @@ <h3>Releases</h3>
     </div>
 
     <!-- Tab Panel 4: Appearance & Behavior -->
-    <div class="tab-panel" data-tab="preferences">
+    <div class="tab-panel" id="panel-preferences" role="tabpanel" data-tab="preferences" aria-labelledby="tab-preferences" hidden>
     <section class="section" id="feed-management">
       <h2>Feed Management</h2>
       <p class="help-text">Control how long activity items are stored in your feed and archive</p>
@@ -542,7 +544,7 @@ <h3>Currently Snoozed</h3>
     </div>
 
     <!-- Tab Panel 5: Advanced -->
-    <div class="tab-panel" data-tab="advanced">
+    <div class="tab-panel" id="panel-advanced" role="tabpanel" data-tab="advanced" aria-labelledby="tab-advanced" hidden>
     <section class="section" id="data-management">
       <h2>Data Management</h2>
       <p class="help-text">Manage your extension data, cache, and settings</p>
@@ -661,7 +663,7 @@ <h2>Import/Export Settings</h2>
     </div>
 
     <!-- Tab Panel 6: Help -->
-    <div class="tab-panel" data-tab="help">
+    <div class="tab-panel" id="panel-help" role="tabpanel" data-tab="help" aria-labelledby="tab-help" hidden>
     <section class="section">
       <div class="help-hero">
         <svg class="help-logo" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
diff --git a/options/options.js b/options/options.js
index 89e7112..0bdfab3 100644
--- a/options/options.js
+++ b/options/options.js
@@ -50,21 +50,38 @@ if (typeof document !== 'undefined') {
 // Theme listener imported from controllers/theme-controller.js
 
 function setupTabNavigation() {
-  const tabButtons = document.querySelectorAll('.tab-button');
-  const tabPanels = document.querySelectorAll('.tab-panel');
+  const tabButtons = Array.from(document.querySelectorAll('.tab-button'));
+  const tabPanels = Array.from(document.querySelectorAll('.tab-panel'));
+
+  if (tabButtons.length === 0 || tabPanels.length === 0) {
+    return;
+  }
+
+  const validTabs = tabButtons
+    .map(button => button.dataset.tab)
+    .filter(Boolean);
+
+  function getTabButton(tabName) {
+    return tabButtons.find(button => button.dataset.tab === tabName);
+  }
+
+  function switchTab(tabName, { focusTab = false } = {}) {
+    if (!validTabs.includes(tabName)) {
+      return;
+    }
 
-  // Function to switch tabs
-  function switchTab(tabName) {
     // Update buttons
     tabButtons.forEach(btn => {
       const isActive = btn.dataset.tab === tabName;
       btn.classList.toggle('active', isActive);
-      btn.setAttribute('aria-selected', isActive);
+      btn.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      btn.tabIndex = isActive ? 0 : -1;
     });
 
     // Update panels
     tabPanels.forEach(panel => {
-      panel.classList.toggle('active', panel.dataset.tab === tabName);
+      const isActive = panel.dataset.tab === tabName;
+      panel.hidden = !isActive;
     });
 
     // Save to localStorage
@@ -72,22 +89,53 @@ function setupTabNavigation() {
 
     // Update URL hash without scrolling
     history.replaceState(null, null, `#${tabName}`);
+
+    if (focusTab) {
+      getTabButton(tabName)?.focus();
+    }
   }
 
   // Add click listeners to tab buttons
-  tabButtons.forEach(button => {
+  tabButtons.forEach((button, index) => {
     button.addEventListener('click', () => {
       switchTab(button.dataset.tab);
     });
+
+    button.addEventListener('keydown', (event) => {
+      let targetIndex = null;
+
+      switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        targetIndex = (index - 1 + tabButtons.length) % tabButtons.length;
+        break;
+      case 'ArrowDown':
+      case 'ArrowRight':
+        targetIndex = (index + 1) % tabButtons.length;
+        break;
+      case 'Home':
+        targetIndex = 0;
+        break;
+      case 'End':
+        targetIndex = tabButtons.length - 1;
+        break;
+      default:
+        return;
+      }
+
+      event.preventDefault();
+      switchTab(tabButtons[targetIndex].dataset.tab, { focusTab: true });
+    });
   });
 
   // Add click listeners to clickable setup steps
   const clickableSetupSteps = document.querySelectorAll('.setup-step.clickable');
   clickableSetupSteps.forEach(step => {
-    step.addEventListener('click', () => {
+    step.addEventListener('click', (event) => {
+      event.preventDefault();
       const tabName = step.dataset.tab;
       if (tabName) {
-        switchTab(tabName);
+        switchTab(tabName, { focusTab: true });
       }
     });
   });
@@ -97,8 +145,6 @@ function setupTabNavigation() {
   const savedTab = localStorage.getItem('activeTab');
   const initialTab = hash || savedTab || 'setup';
 
-  // Check if the hash/saved tab is valid
-  const validTabs = ['setup', 'repositories', 'filters', 'preferences', 'advanced', 'help'];
   const tabToActivate = validTabs.includes(initialTab) ? initialTab : 'setup';
 
   switchTab(tabToActivate);
@@ -1147,6 +1193,7 @@ setInterval(async () => {
 // ES6 exports for tests
 export {
   state,
+  setupTabNavigation,
   validateToken,
   addRepo,
   validateRepo,
diff --git a/tests/accessibility.test.js b/tests/accessibility.test.js
index 2e5d3f2..ca2d5d9 100644
--- a/tests/accessibility.test.js
+++ b/tests/accessibility.test.js
@@ -1,344 +1,138 @@
-/**
- * Accessibility tests for keyboard navigation and ARIA support
- */
-
-import { jest } from '@jest/globals';
+import { readFileSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { expect, jest } from '@jest/globals';
 import '@testing-library/jest-dom';
 import jestAxe from 'jest-axe';
 
 const { axe, toHaveNoViolations } = jestAxe;
 
-// Extend Jest matchers
 expect.extend(toHaveNoViolations);
 
-// Mock DOM environment
-document.body.innerHTML = `
-  <div class="container">
-    <header>
-      <h1>GitHub Activity</h1>
-      <div class="header-actions">
-        <button id="darkModeBtn" class="icon-btn" aria-label="Toggle theme" tabindex="0">🌙</button>
-        <button id="refreshBtn" class="icon-btn" aria-label="Check for new activity" tabindex="0">🔄</button>
-      </div>
-    </header>
-
-    <nav aria-label="Activity filters">
-      <div class="toolbar">
-        <div class="filters" role="tablist" aria-label="Filter activities by type">
-          <button class="filter-btn active" data-type="all" role="tab" aria-selected="true" aria-controls="activityList" tabindex="0">All</button>
-          <button class="filter-btn" data-type="pr" role="tab" aria-selected="false" aria-controls="activityList" tabindex="-1">PRs</button>
-          <button class="filter-btn" data-type="issue" role="tab" aria-selected="false" aria-controls="activityList" tabindex="-1">Issues</button>
-          <button class="filter-btn" data-type="release" role="tab" aria-selected="false" aria-controls="activityList" tabindex="-1">Releases</button>
-        </div>
-      </div>
-    </nav>
-
-    <div id="searchBox" class="search-box" style="display: none;" role="search">
-      <label for="searchInput">Search:</label>
-      <input type="text" id="searchInput" aria-label="Search through GitHub activities" autocomplete="off">
-    </div>
-
-    <div id="activityList" class="activity-list" role="main" aria-label="GitHub activities" aria-live="polite">
-      <div class="empty-state">
-        <p>No recent activity</p>
-      </div>
-    </div>
-
-    <footer role="contentinfo">
-      <div id="errorMessage" class="error-message" role="alert" aria-live="assertive" style="display: none;"></div>
-    </footer>
-  </div>
-`;
-
-describe('Accessibility Features', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('ARIA Labels and Roles', () => {
-    it('should have proper ARIA labels on interactive elements', () => {
-      const darkModeBtn = document.getElementById('darkModeBtn');
-      const refreshBtn = document.getElementById('refreshBtn');
-      const searchInput = document.getElementById('searchInput');
-
-      expect(darkModeBtn).toHaveAttribute('aria-label');
-      expect(refreshBtn).toHaveAttribute('aria-label');
-      expect(searchInput).toHaveAttribute('aria-label');
-    });
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const optionsHtml = readFileSync(
+  path.join(__dirname, '..', 'options', 'options.html'),
+  'utf8'
+);
+const bodyMarkup = optionsHtml.match(/<body[^>]*>([\s\S]*)<\/body>/i)?.[1] ?? optionsHtml;
 
-    it('should have proper roles on landmark elements', () => {
-      const filters = document.querySelector('.filters');
-      const searchBox = document.getElementById('searchBox');
-      const activityList = document.getElementById('activityList');
-      const footer = document.querySelector('footer');
+const { setupTabNavigation } = await import('../options/options.js');
 
-      expect(filters).toHaveAttribute('role', 'tablist');
-      expect(searchBox).toHaveAttribute('role', 'search');
-      expect(activityList).toHaveAttribute('role', 'main');
-      expect(footer).toHaveAttribute('role', 'contentinfo');
-    });
+function loadOptionsFixture() {
+  localStorage.clear();
+  history.replaceState(null, '', '/options/options.html');
+  document.body.innerHTML = bodyMarkup;
+}
 
-    it('should have proper ARIA attributes on filter tabs', () => {
-      const filterButtons = document.querySelectorAll('.filter-btn');
-
-      filterButtons.forEach((btn, index) => {
-        expect(btn).toHaveAttribute('role', 'tab');
-        expect(btn).toHaveAttribute('aria-controls');
-        expect(btn).toHaveAttribute('tabindex');
-
-        if (index === 0) {
-          expect(btn).toHaveAttribute('aria-selected', 'true');
-          expect(btn).toHaveAttribute('tabindex', '0');
-        } else {
-          expect(btn).toHaveAttribute('aria-selected', 'false');
-          expect(btn).toHaveAttribute('tabindex', '-1');
-        }
-      });
-    });
+function getTab(tabName) {
+  return document.querySelector(`.tab-button[data-tab="${tabName}"]`);
+}
 
-    it('should have ARIA live regions for dynamic content', () => {
-      const activityList = document.getElementById('activityList');
-      const errorMessage = document.getElementById('errorMessage');
+function getPanel(tabName) {
+  return document.querySelector(`.tab-panel[data-tab="${tabName}"]`);
+}
 
-      expect(activityList).toHaveAttribute('aria-live', 'polite');
-      expect(errorMessage).toHaveAttribute('role', 'alert');
-      expect(errorMessage).toHaveAttribute('aria-live', 'assertive');
-    });
+describe('Options accessibility', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    loadOptionsFixture();
   });
 
-  describe('Keyboard Navigation', () => {
-    let mockKeyDownEvent;
-
-    beforeEach(() => {
-      mockKeyDownEvent = {
-        key: '',
-        preventDefault: jest.fn(),
-        target: { tagName: 'DIV' },
-        ctrlKey: false,
-        metaKey: false
-      };
-    });
+  it('uses shipped tablist and tabpanel relationships', () => {
+    setupTabNavigation();
 
-    it('should handle refresh shortcut (R key)', () => {
-      const refreshBtn = document.getElementById('refreshBtn');
-      expect(refreshBtn).toBeTruthy();
-      expect(refreshBtn).toHaveAttribute('tabindex', '0');
+    const tablist = document.querySelector('[role="tablist"]');
+    const tabs = Array.from(document.querySelectorAll('[role="tab"]'));
+    const panels = Array.from(document.querySelectorAll('[role="tabpanel"]'));
 
-      mockKeyDownEvent.key = 'r';
-      const event = new KeyboardEvent('keydown', mockKeyDownEvent);
+    expect(tablist).toHaveAttribute('aria-orientation', 'vertical');
+    expect(tabs).toHaveLength(6);
+    expect(panels).toHaveLength(6);
 
-      // Test that the event can be dispatched (implementation would handle the shortcut)
-      expect(() => {
-        document.dispatchEvent(event);
-      }).not.toThrow();
-    });
+    tabs.forEach(tab => {
+      const panelId = tab.getAttribute('aria-controls');
+      const panel = document.getElementById(panelId);
 
-    it('should handle search toggle shortcut (S key)', () => {
-      const searchBox = document.getElementById('searchBox');
-
-      mockKeyDownEvent.key = 's';
-      document.dispatchEvent(new KeyboardEvent('keydown', mockKeyDownEvent));
-
-      // In real implementation, this would toggle the search box
-      expect(searchBox).toBeTruthy();
-    });
-
-    it('should handle escape key to close search', () => {
-      const searchBox = document.getElementById('searchBox');
-      searchBox.style.display = 'block';
-
-      mockKeyDownEvent.key = 'Escape';
-      document.dispatchEvent(new KeyboardEvent('keydown', mockKeyDownEvent));
-
-      // In real implementation, this would hide the search box
-      expect(searchBox.style.display).toBeTruthy();
-    });
-
-    it('should not trigger shortcuts when typing in input fields', () => {
-      const refreshBtn = document.getElementById('refreshBtn');
-      jest.spyOn(refreshBtn, 'click');
-
-      mockKeyDownEvent.key = 'r';
-      mockKeyDownEvent.target.tagName = 'INPUT';
-      document.dispatchEvent(new KeyboardEvent('keydown', mockKeyDownEvent));
-
-      expect(refreshBtn.click).not.toHaveBeenCalled();
-    });
-
-    it('should handle arrow key navigation between filter tabs', () => {
-      const filterButtons = document.querySelectorAll('.filter-btn');
-      const secondBtn = filterButtons[1];
-
-      mockKeyDownEvent.key = 'ArrowRight';
-      mockKeyDownEvent.target = filterButtons[0];
-
-      // Simulate the enhanced navigation
-      const event = new KeyboardEvent('keydown', mockKeyDownEvent);
-      filterButtons[0].dispatchEvent(event);
-
-      expect(secondBtn.tabIndex).toBeDefined();
-    });
-
-    it('should handle Enter and Space keys on filter buttons', () => {
-      const firstBtn = document.querySelector('.filter-btn');
-      expect(firstBtn).toBeTruthy();
-
-      ['Enter', ' '].forEach(key => {
-        mockKeyDownEvent.key = key;
-        mockKeyDownEvent.target = firstBtn;
-
-        const event = new KeyboardEvent('keydown', mockKeyDownEvent);
-
-        // Test that the event can be dispatched without errors
-        expect(() => {
-          firstBtn.dispatchEvent(event);
-        }).not.toThrow();
-      });
+      expect(tab).toHaveAttribute('id');
+      expect(panel).toHaveAttribute('role', 'tabpanel');
+      expect(panel).toHaveAttribute('aria-labelledby', tab.id);
     });
   });
 
-  describe('Screen Reader Support', () => {
-    it('should have descriptive labels for all interactive elements', () => {
-      const interactiveElements = document.querySelectorAll('button, input, a, [role="button"]');
+  it('activates the saved tab with roving tabindex and hidden panels', () => {
+    localStorage.setItem('activeTab', 'filters');
 
-      interactiveElements.forEach(element => {
-        const hasAriaLabel = element.hasAttribute('aria-label');
-        const hasAriaLabelledBy = element.hasAttribute('aria-labelledby');
-        const hasTitle = element.hasAttribute('title');
-        const hasTextContent = element.textContent.trim().length > 0;
+    setupTabNavigation();
 
-        const hasDescription = hasAriaLabel || hasAriaLabelledBy || hasTitle || hasTextContent;
-        expect(hasDescription).toBe(true);
-      });
-    });
+    expect(getTab('filters')).toHaveAttribute('aria-selected', 'true');
+    expect(getTab('filters')).toHaveAttribute('tabindex', '0');
+    expect(getPanel('filters')).not.toHaveAttribute('hidden');
 
-    it('should have proper heading hierarchy', () => {
-      const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
-      expect(headings.length).toBeGreaterThan(0);
+    expect(getTab('setup')).toHaveAttribute('aria-selected', 'false');
+    expect(getTab('setup')).toHaveAttribute('tabindex', '-1');
+    expect(getPanel('setup')).toHaveAttribute('hidden');
+  });
 
-      // First heading should be h1
-      expect(headings[0].tagName).toBe('H1');
-    });
+  it('supports arrow-key navigation between actual settings tabs', () => {
+    setupTabNavigation();
 
-    it('should announce changes to screen readers', () => {
-      const errorMessage = document.getElementById('errorMessage');
+    const setupTab = getTab('setup');
 
-      // Error messages should be announced immediately
-      expect(errorMessage).toHaveAttribute('role', 'alert');
-      expect(errorMessage).toHaveAttribute('aria-live', 'assertive');
+    setupTab.focus();
+    setupTab.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'ArrowDown',
+      bubbles: true
+    }));
 
-      // Activity updates should be announced politely
-      const activityList = document.getElementById('activityList');
-      expect(activityList).toHaveAttribute('aria-live', 'polite');
-    });
+    expect(document.activeElement).toBe(getTab('repositories'));
+    expect(getTab('repositories')).toHaveAttribute('aria-selected', 'true');
+    expect(getTab('repositories')).toHaveAttribute('tabindex', '0');
+    expect(getPanel('repositories')).not.toHaveAttribute('hidden');
+    expect(getPanel('setup')).toHaveAttribute('hidden');
+    expect(localStorage.getItem('activeTab')).toBe('repositories');
   });
 
-  describe('Focus Management', () => {
-    it('should maintain proper focus order', () => {
-      const focusableElements = document.querySelectorAll(
-        'button:not([disabled]), [href], input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-
-      // Should have focusable elements
-      expect(focusableElements.length).toBeGreaterThan(0);
-
-      // Filter buttons should have proper tabindex
-      const filterButtons = document.querySelectorAll('.filter-btn');
-      expect(filterButtons[0]).toHaveAttribute('tabindex', '0');
-      expect(filterButtons[1]).toHaveAttribute('tabindex', '-1');
-    });
+  it('supports Home and End keys across the vertical tablist', () => {
+    setupTabNavigation();
 
-    it('should update tabindex when filters change', () => {
-      const filterButtons = document.querySelectorAll('.filter-btn');
+    const setupTab = getTab('setup');
 
-      // Test that buttons have initial tabindex values
-      expect(filterButtons[0]).toHaveAttribute('tabindex', '0');
-      expect(filterButtons[0]).toHaveAttribute('aria-selected', 'true');
-      expect(filterButtons[1]).toHaveAttribute('tabindex', '-1');
-      expect(filterButtons[1]).toHaveAttribute('aria-selected', 'false');
+    setupTab.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'End',
+      bubbles: true
+    }));
+    expect(document.activeElement).toBe(getTab('help'));
+    expect(getTab('help')).toHaveAttribute('aria-selected', 'true');
 
-      // In a real implementation, clicking would update these attributes
-      // For now, just test that the click can be triggered
-      expect(() => {
-        filterButtons[1].click();
-      }).not.toThrow();
-    });
+    getTab('help').dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Home',
+      bubbles: true
+    }));
+    expect(document.activeElement).toBe(getTab('setup'));
+    expect(getTab('setup')).toHaveAttribute('aria-selected', 'true');
   });
 
-  describe('High Contrast and Reduced Motion', () => {
-    it('should not rely solely on color for information', () => {
-      const activeFilter = document.querySelector('.filter-btn.active');
-      const inactiveFilter = document.querySelectorAll('.filter-btn')[1];
+  it('lets setup-step links switch tabs without losing keyboard focus', () => {
+    setupTabNavigation();
 
-      // Should have additional indicators beyond color
-      expect(activeFilter.classList.contains('active')).toBe(true);
-      expect(inactiveFilter.classList.contains('active')).toBe(false);
-    });
-  });
+    const repositoriesStep = document.querySelector('.setup-step.clickable[data-tab="repositories"]');
 
-  describe('Automated WCAG Compliance (axe-core)', () => {
-    it('should not have any automatically detectable WCAG violations', async () => {
-      const results = await axe(document.body, {
-        rules: {
-          // Disable color-contrast in JSDOM as it requires canvas support
-          'color-contrast': { enabled: false }
-        }
-      });
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should have valid form labels', async () => {
-      const results = await axe(document.body, {
-        rules: {
-          label: { enabled: true },
-          'color-contrast': { enabled: false }
-        }
-      });
-      expect(results).toHaveNoViolations();
-    });
+    repositoriesStep.dispatchEvent(new window.MouseEvent('click', {
+      bubbles: true,
+      cancelable: true
+    }));
 
-    it('should have proper button names', async () => {
-      const results = await axe(document.body, {
-        rules: {
-          'button-name': { enabled: true },
-          'color-contrast': { enabled: false }
-        }
-      });
-      expect(results).toHaveNoViolations();
-    });
+    expect(document.activeElement).toBe(getTab('repositories'));
+    expect(getPanel('repositories')).not.toHaveAttribute('hidden');
+    expect(getTab('repositories')).toHaveAttribute('aria-selected', 'true');
+  });
 
-    it('should have proper ARIA attributes', async () => {
-      const results = await axe(document.body, {
-        rules: {
-          'aria-valid-attr': { enabled: true },
-          'aria-valid-attr-value': { enabled: true },
-          'color-contrast': { enabled: false }
-        }
-      });
-      expect(results).toHaveNoViolations();
-    });
+  it('has no automated axe violations in the shipped settings shell', async () => {
+    setupTabNavigation();
 
-    it('should have unique IDs', async () => {
-      const results = await axe(document.body, {
-        rules: {
-          'duplicate-id': { enabled: true },
-          'color-contrast': { enabled: false }
-        }
-      });
-      expect(results).toHaveNoViolations();
-    });
+    const results = await axe(document.querySelector('.container'));
 
-    it('should have proper landmark structure', async () => {
-      const results = await axe(document.body, {
-        rules: {
-          'landmark-one-main': { enabled: true },
-          'region': { enabled: true },
-          'color-contrast': { enabled: false }
-        }
-      });
-      expect(results).toHaveNoViolations();
-    });
+    expect(results).toHaveNoViolations();
   });
 });
-
-export {};
\ No newline at end of file
