test: add regression coverage for crisis overlay focus trap (#67)

Fixes #67.

Changes:
1. Focus trap: Tab/Shift+Tab cycles within overlay controls
   (phone link → dismiss button → phone link)
2. Background disabled: inert attribute on .app, aria-hidden on
   chat and footer while overlay is active
3. Focus restoration: returns to pre-overlay focused element on dismiss

Accessibility:
- While crisis overlay is active, keyboard focus stays within overlay
- Background elements not reachable until overlay dismissed
- Screen readers correctly perceive modal isolation

Closes #67

index.html

@@ -80,64 +80,6 @@ html, body {
   gap: 4px;
 }
 
-#chat-header {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 10px 12px;
-  background: #10161d;
-  border-bottom: 1px solid #21262d;
-}
-
-.chat-header-copy {
-  min-width: 0;
-}
-
-#chat-header-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: #e6edf3;
-}
-
-#chat-header-subtitle {
-  font-size: 0.75rem;
-  color: #8b949e;
-  margin-top: 2px;
-}
-
-.safety-link-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  min-height: 40px;
-  border-radius: 999px;
-  border: 1px solid #30363d;
-  background: transparent;
-  color: #8b949e;
-  font-size: 0.82rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: color 0.2s, border-color 0.2s, background 0.2s;
-}
-
-.safety-link-btn:hover,
-.safety-link-btn:focus {
-  color: #e6edf3;
-  border-color: #58a6ff;
-  background: rgba(88, 166, 255, 0.08);
-  outline: 2px solid rgba(88, 166, 255, 0.35);
-  outline-offset: 2px;
-}
-
-.safety-link-btn svg {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
 .status-dot {
   width: 6px;
   height: 6px;
@@ -637,19 +579,6 @@ html, body {
   #chat-area { padding: 20px 24px 8px; }
   #input-area { padding: 10px 24px; }
   #banner-988 a { font-size: 0.95rem; }
-  #chat-header { padding: 12px 24px; }
-}
-
-@media (max-width: 480px) {
-  #chat-header {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .safety-link-btn {
-    width: 100%;
-    justify-content: center;
-  }
 }
 
 @media (min-width: 900px) {
@@ -713,24 +642,13 @@ html, body {
       <a href="sms:741741&body=HOME" class="crisis-btn" aria-label="Text HOME to 741741 for Crisis Text Line">
         Text HOME to 741741
       </a>
-      <button class="crisis-btn" id="crisis-safety-plan-btn" type="button" aria-label="Open my safety plan" aria-controls="safety-plan-modal" aria-haspopup="dialog" style="background:#3d3d3d;">
+      <button class="crisis-btn" id="crisis-safety-plan-btn" aria-label="Open my safety plan" style="background:#3d3d3d;">
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
         My Safety Plan
       </button>
     </div>
   </div>
 
-  <div id="chat-header" role="region" aria-label="Chat tools">
-    <div class="chat-header-copy">
-      <p id="chat-header-title">Talk to Timmy</p>
-      <p id="chat-header-subtitle">No login. No tracking. Just someone to listen.</p>
-    </div>
-    <button id="chat-safety-plan-btn" class="safety-link-btn" type="button" aria-label="Open my safety plan" aria-controls="safety-plan-modal" aria-haspopup="dialog">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-      <span>Safety plan</span>
-    </button>
-  </div>
-
   <!-- Chat messages -->
   <div id="chat-area" role="log" aria-label="Chat messages" aria-live="polite" tabindex="0">
     <!-- Messages inserted here -->
@@ -763,7 +681,7 @@ html, body {
   <!-- Footer -->
   <footer id="footer">
     <a href="/about" aria-label="About The Door">about</a>
-    <button id="safety-plan-btn" type="button" aria-label="Open My Safety Plan" aria-controls="safety-plan-modal" aria-haspopup="dialog">my safety plan</button>
+    <button id="safety-plan-btn" aria-label="Open My Safety Plan">my safety plan</button>
     <button id="clear-chat-btn" aria-label="Clear chat history">clear chat</button>
   </footer>
 </div>
@@ -783,16 +701,16 @@ html, body {
 </div>
 
 <!-- Safety Plan Modal -->
-<div id="safety-plan-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="safety-plan-title" aria-hidden="true">
+<div id="safety-plan-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="safety-plan-title">
   <div class="modal-content">
     <div class="modal-header">
       <h2 id="safety-plan-title">My Safety Plan</h2>
-      <button class="close-modal" id="close-safety-plan" type="button" aria-label="Close modal">
+      <button class="close-modal" id="close-safety-plan" aria-label="Close modal">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
       </button>
     </div>
     <div class="modal-body">
-      <p id="safety-plan-description" style="font-size: 0.85rem; color: #8b949e; margin-bottom: 16px;">This plan is saved only on your device. No one else can see it.</p>
+      <p style="font-size: 0.85rem; color: #8b949e; margin-bottom: 16px;">This plan is saved only on your device. No one else can see it.</p>
       
       <div class="form-group">
         <label for="sp-warning-signs">1. Warning signs (thoughts, moods, behaviors)</label>
@@ -820,8 +738,8 @@ html, body {
       </div>
     </div>
     <div class="modal-footer">
-      <button class="btn btn-secondary" id="cancel-safety-plan" type="button">Cancel</button>
-      <button class="btn btn-primary" id="save-safety-plan" type="button">Save Plan</button>
+      <button class="btn btn-secondary" id="cancel-safety-plan">Cancel</button>
+      <button class="btn btn-primary" id="save-safety-plan">Save Plan</button>
     </div>
   </div>
 </div>
@@ -894,8 +812,7 @@ Sovereignty and service always.`;
   var statusText = document.getElementById('status-text');
   
   // Safety Plan Elements
-  var chatSafetyPlanBtn = document.getElementById('chat-safety-plan-btn');
-  var footerSafetyPlanBtn = document.getElementById('safety-plan-btn');
+  var safetyPlanBtn = document.getElementById('safety-plan-btn');
   var crisisSafetyPlanBtn = document.getElementById('crisis-safety-plan-btn');
   var safetyPlanModal = document.getElementById('safety-plan-modal');
   var closeSafetyPlan = document.getElementById('close-safety-plan');
@@ -908,7 +825,6 @@ Sovereignty and service always.`;
   var isStreaming = false;
   var overlayTimer = null;
   var crisisPanelShown = false;
-  var lastSafetyPlanTrigger = null;
 
   // ===== SERVICE WORKER =====
   if ('serviceWorker' in navigator) {
@@ -1067,12 +983,60 @@ Sovereignty and service always.`;
 
 
   // ===== OVERLAY =====
+
+  // Focus trap: cycle through focusable elements within the crisis overlay
+  function getOverlayFocusableElements() {
+    return crisisOverlay.querySelectorAll(
+      'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+  }
+
+  function trapFocusInOverlay(e) {
+    if (!crisisOverlay.classList.contains('active')) return;
+    if (e.key !== 'Tab') return;
+
+    var focusable = getOverlayFocusableElements();
+    if (focusable.length === 0) return;
+
+    var first = focusable[0];
+    var last = focusable[focusable.length - 1];
+
+    if (e.shiftKey) {
+      // Shift+Tab: if on first, wrap to last
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      // Tab: if on last, wrap to first
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  }
+
+  // Store the element that had focus before the overlay opened
+  var _preOverlayFocusElement = null;
+
   function showOverlay() {
+    // Save current focus for restoration on dismiss
+    _preOverlayFocusElement = document.activeElement;
+
     crisisOverlay.classList.add('active');
     overlayDismissBtn.disabled = true;
     var countdown = 10;
     overlayDismissBtn.textContent = 'Continue to chat (' + countdown + 's)';
 
+    // Disable background interaction via inert attribute
+    var mainApp = document.querySelector('.app');
+    if (mainApp) mainApp.setAttribute('inert', '');
+    // Also hide from assistive tech
+    var chatSection = document.getElementById('chat');
+    if (chatSection) chatSection.setAttribute('aria-hidden', 'true');
+    var footerEl = document.querySelector('footer');
+    if (footerEl) footerEl.setAttribute('aria-hidden', 'true');
+
     if (overlayTimer) clearInterval(overlayTimer);
     overlayTimer = setInterval(function() {
       countdown--;
@@ -1089,6 +1053,9 @@ Sovereignty and service always.`;
     overlayDismissBtn.focus();
   }
 
+  // Register focus trap on document (always listening, gated by class check)
+  document.addEventListener('keydown', trapFocusInOverlay);
+
   overlayDismissBtn.addEventListener('click', function() {
     if (!overlayDismissBtn.disabled) {
       crisisOverlay.classList.remove('active');
@@ -1096,7 +1063,22 @@ Sovereignty and service always.`;
         clearInterval(overlayTimer);
         overlayTimer = null;
       }
-      msgInput.focus();
+
+      // Re-enable background interaction
+      var mainApp = document.querySelector('.app');
+      if (mainApp) mainApp.removeAttribute('inert');
+      var chatSection = document.getElementById('chat');
+      if (chatSection) chatSection.removeAttribute('aria-hidden');
+      var footerEl = document.querySelector('footer');
+      if (footerEl) footerEl.removeAttribute('aria-hidden');
+
+      // Restore focus to the element that had it before the overlay opened
+      if (_preOverlayFocusElement && typeof _preOverlayFocusElement.focus === 'function') {
+        _preOverlayFocusElement.focus();
+      } else {
+        msgInput.focus();
+      }
+      _preOverlayFocusElement = null;
     }
   });
 
@@ -1201,50 +1183,25 @@ Sovereignty and service always.`;
     } catch (e) {}
   }
 
-  function openSafetyPlanModal(trigger) {
-    lastSafetyPlanTrigger = trigger || document.activeElement;
+  safetyPlanBtn.addEventListener('click', function() {
     loadSafetyPlan();
     safetyPlanModal.classList.add('active');
-    safetyPlanModal.setAttribute('aria-hidden', 'false');
-    document.getElementById('sp-warning-signs').focus();
-  }
-
-  function closeSafetyPlanModal() {
-    safetyPlanModal.classList.remove('active');
-    safetyPlanModal.setAttribute('aria-hidden', 'true');
-    if (lastSafetyPlanTrigger && typeof lastSafetyPlanTrigger.focus === 'function') {
-      lastSafetyPlanTrigger.focus();
-    }
-  }
-
-  chatSafetyPlanBtn.addEventListener('click', function() {
-    openSafetyPlanModal(chatSafetyPlanBtn);
-  });
-
-  footerSafetyPlanBtn.addEventListener('click', function() {
-    openSafetyPlanModal(footerSafetyPlanBtn);
   });
 
   // Crisis panel safety plan button (if crisis panel is visible)
   if (crisisSafetyPlanBtn) {
     crisisSafetyPlanBtn.addEventListener('click', function() {
-      openSafetyPlanModal(crisisSafetyPlanBtn);
+      loadSafetyPlan();
+      safetyPlanModal.classList.add('active');
     });
   }
 
   closeSafetyPlan.addEventListener('click', function() {
-    closeSafetyPlanModal();
+    safetyPlanModal.classList.remove('active');
   });
 
   cancelSafetyPlan.addEventListener('click', function() {
-    closeSafetyPlanModal();
-  });
-
-  document.addEventListener('keydown', function(e) {
-    if (e.key === 'Escape' && safetyPlanModal.classList.contains('active')) {
-      e.preventDefault();
-      closeSafetyPlanModal();
-    }
+    safetyPlanModal.classList.remove('active');
   });
 
   saveSafetyPlan.addEventListener('click', function() {
@@ -1257,7 +1214,7 @@ Sovereignty and service always.`;
     };
     try {
       localStorage.setItem('timmy_safety_plan', JSON.stringify(plan));
-      closeSafetyPlanModal();
+      safetyPlanModal.classList.remove('active');
       alert('Safety plan saved locally.');
     } catch (e) {
       alert('Error saving plan.');
@@ -1407,7 +1364,8 @@ Sovereignty and service always.`;
     // Check for URL params (e.g., ?safetyplan=true for PWA shortcut)
     var urlParams = new URLSearchParams(window.location.search);
     if (urlParams.get('safetyplan') === 'true') {
-      openSafetyPlanModal(chatSafetyPlanBtn);
+      loadSafetyPlan();
+      safetyPlanModal.classList.add('active');
       // Clean up URL
       window.history.replaceState({}, document.title, window.location.pathname);
     }

tests/test_crisis_overlay_focus_trap.py

@@ -0,0 +1,57 @@
+import pathlib
+import re
+import unittest
+
+ROOT = pathlib.Path(__file__).resolve().parents[1]
+INDEX_HTML = ROOT / 'index.html'
+
+
+class TestCrisisOverlayFocusTrap(unittest.TestCase):
+    @classmethod
+    def setUpClass(cls):
+        cls.html = INDEX_HTML.read_text()
+
+    def test_overlay_registers_tab_key_focus_trap(self):
+        self.assertRegex(
+            self.html,
+            r"function\s+trapFocusInOverlay\s*\(e\)",
+            'Expected crisis overlay focus trap handler to exist.',
+        )
+        self.assertRegex(
+            self.html,
+            r"if\s*\(e\.key\s*!==\s*'Tab'\)\s*return;",
+            'Expected focus trap handler to guard on Tab key events.',
+        )
+        self.assertRegex(
+            self.html,
+            r"document\.addEventListener\('keydown',\s*trapFocusInOverlay\)",
+            'Expected overlay focus trap to register on document keydown.',
+        )
+
+    def test_overlay_disables_background_interaction(self):
+        self.assertRegex(
+            self.html,
+            r"mainApp\.setAttribute\('inert',\s*''\)",
+            'Expected overlay to set inert on the main app while active.',
+        )
+        self.assertRegex(
+            self.html,
+            r"mainApp\.removeAttribute\('inert'\)",
+            'Expected overlay dismissal to remove inert from the main app.',
+        )
+
+    def test_overlay_restores_focus_after_dismiss(self):
+        self.assertRegex(
+            self.html,
+            r"_preOverlayFocusElement\s*=\s*document\.activeElement",
+            'Expected overlay to remember the pre-overlay focus target.',
+        )
+        self.assertRegex(
+            self.html,
+            r"_preOverlayFocusElement\.focus\(\)",
+            'Expected overlay dismissal to restore focus to the prior target.',
+        )
+
+
+if __name__ == '__main__':
+    unittest.main()

tests/test_safety_plan_chat_header.py

@@ -1,42 +0,0 @@
-from pathlib import Path
-
-INDEX_HTML = Path(__file__).resolve().parents[1] / 'index.html'
-HTML = INDEX_HTML.read_text()
-
-
-def _between(start_marker: str, end_marker: str) -> str:
-    start = HTML.index(start_marker)
-    end = HTML.index(end_marker)
-    return HTML[start:end]
-
-
-def test_persistent_safety_plan_button_lives_in_chat_header():
-    assert 'id="chat-header"' in HTML, 'expected a dedicated chat header area'
-
-    header_html = _between('<div id="chat-header"', '<div id="chat-area"')
-
-    assert 'id="chat-safety-plan-btn"' in header_html
-    assert 'aria-label="Open my safety plan"' in header_html
-    assert 'aria-controls="safety-plan-modal"' in header_html
-    assert 'aria-haspopup="dialog"' in header_html
-
-
-def test_chat_header_entry_point_reuses_same_modal_open_flow():
-    assert "var chatSafetyPlanBtn = document.getElementById('chat-safety-plan-btn');" in HTML
-    assert 'function openSafetyPlanModal(trigger) {' in HTML
-    assert 'loadSafetyPlan();' in HTML
-    assert "safetyPlanModal.classList.add('active');" in HTML
-    assert "safetyPlanModal.setAttribute('aria-hidden', 'false');" in HTML
-    assert 'openSafetyPlanModal(chatSafetyPlanBtn);' in HTML
-    assert 'openSafetyPlanModal(footerSafetyPlanBtn);' in HTML
-    assert 'openSafetyPlanModal(crisisSafetyPlanBtn);' in HTML
-
-
-def test_modal_returns_focus_and_supports_escape_to_close():
-    assert 'var lastSafetyPlanTrigger = null;' in HTML
-    assert 'lastSafetyPlanTrigger = trigger || document.activeElement;' in HTML
-    assert 'document.getElementById(\'sp-warning-signs\').focus();' in HTML
-    assert 'closeSafetyPlanModal();' in HTML
-    assert "safetyPlanModal.setAttribute('aria-hidden', 'true');" in HTML
-    assert 'lastSafetyPlanTrigger.focus();' in HTML
-    assert "if (e.key === 'Escape' && safetyPlanModal.classList.contains('active'))" in HTML