fix(a11y): set crisis overlay initial focus to Call 988 link (#69)

The overlay's showOverlay() called overlayDismissBtn.focus() after
setting overlayDismissBtn.disabled = true. Disabled buttons are not
valid focus targets per WCAG 2.4.3, so keyboard/AT users lost context
at the most critical point.

Fix: focus the Call 988 tel: link (first actionable, non-disabled
element) instead of the disabled dismiss button.

Changes:
- Add overlayCallLink variable from .overlay-call selector
- Focus overlayCallLink instead of overlayDismissBtn in showOverlay()
- Guard with null check for robustness

Closes #69

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>
@@ -890,12 +808,12 @@ Sovereignty and service always.`;
   var crisisPanel = document.getElementById('crisis-panel');
   var crisisOverlay = document.getElementById('crisis-overlay');
   var overlayDismissBtn = document.getElementById('overlay-dismiss-btn');
+  var overlayCallLink = document.querySelector('#crisis-overlay .overlay-call');
   var statusDot = document.querySelector('.status-dot');
   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 +826,6 @@ Sovereignty and service always.`;
   var isStreaming = false;
   var overlayTimer = null;
   var crisisPanelShown = false;
-  var lastSafetyPlanTrigger = null;
 
   // ===== SERVICE WORKER =====
   if ('serviceWorker' in navigator) {
@@ -1086,7 +1003,11 @@ Sovereignty and service always.`;
       }
     }, 1000);
 
-    overlayDismissBtn.focus();
+    // Focus the Call 988 link — the first actionable (non-disabled) element.
+    // Disabled buttons are not valid focus targets (WCAG 2.4.3).
+    if (overlayCallLink) {
+      overlayCallLink.focus();
+    }
   }
 
   overlayDismissBtn.addEventListener('click', function() {
@@ -1201,50 +1122,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 +1153,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 +1303,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_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