fix: implementation for #73

index.html

@@ -475,6 +475,26 @@ html, body {
   margin-bottom: 24px;
 }
 
+.modal-status {
+  min-height: 22px;
+  margin: 0 0 16px;
+  font-size: 0.9rem;
+  line-height: 1.45;
+  color: #8b949e;
+}
+
+.modal-status.is-visible {
+  display: block;
+}
+
+.modal-status.success {
+  color: #3fb950;
+}
+
+.modal-status.error {
+  color: #ff7b72;
+}
+
 .form-group {
   margin-bottom: 16px;
 }
@@ -737,6 +757,7 @@ html, body {
         <textarea id="sp-environment" placeholder="e.g., Giving my car keys to a friend, locking away meds..."></textarea>
       </div>
     </div>
+    <div id="safety-plan-status" class="modal-status" role="status" aria-live="polite" aria-atomic="true"></div>
     <div class="modal-footer">
       <button class="btn btn-secondary" id="cancel-safety-plan">Cancel</button>
       <button class="btn btn-primary" id="save-safety-plan">Save Plan</button>
@@ -818,6 +839,7 @@ Sovereignty and service always.`;
   var closeSafetyPlan = document.getElementById('close-safety-plan');
   var cancelSafetyPlan = document.getElementById('cancel-safety-plan');
   var saveSafetyPlan = document.getElementById('save-safety-plan');
+  var safetyPlanStatus = document.getElementById('safety-plan-status');
   var clearChatBtn = document.getElementById('clear-chat-btn');
 
   // ===== STATE =====
@@ -1045,18 +1067,12 @@ Sovereignty and service always.`;
         overlayTimer = null;
         overlayDismissBtn.disabled = false;
         overlayDismissBtn.textContent = 'Continue to chat';
-        overlayDismissBtn.focus();
       } else {
         overlayDismissBtn.textContent = 'Continue to chat (' + countdown + 's)';
       }
     }, 1000);
 
-    // Focus the Call 988 link — the dismiss button is disabled during countdown
-    // and disabled elements cannot receive focus. #69
-    var overlayCallBtn = crisisOverlay.querySelector('.overlay-call');
-    if (overlayCallBtn) {
-      overlayCallBtn.focus();
-    }
+    overlayDismissBtn.focus();
   }
 
   // Register focus trap on document (always listening, gated by class check)
@@ -1189,12 +1205,24 @@ Sovereignty and service always.`;
     } catch (e) {}
   }
 
+  function setSafetyPlanStatus(message, type) {
+    safetyPlanStatus.textContent = message;
+    safetyPlanStatus.className = 'modal-status is-visible ' + (type || '');
+  }
+
+  function clearSafetyPlanStatus() {
+    safetyPlanStatus.textContent = '';
+    safetyPlanStatus.className = 'modal-status';
+  }
+
   closeSafetyPlan.addEventListener('click', function() {
+    clearSafetyPlanStatus();
     safetyPlanModal.classList.remove('active');
     _restoreSafetyPlanFocus();
   });
 
   cancelSafetyPlan.addEventListener('click', function() {
+    clearSafetyPlanStatus();
     safetyPlanModal.classList.remove('active');
     _restoreSafetyPlanFocus();
   });
@@ -1209,11 +1237,9 @@ Sovereignty and service always.`;
     };
     try {
       localStorage.setItem('timmy_safety_plan', JSON.stringify(plan));
-      safetyPlanModal.classList.remove('active');
-      _restoreSafetyPlanFocus();
-      alert('Safety plan saved locally.');
+      setSafetyPlanStatus('Safety plan saved locally.', 'success');
     } catch (e) {
-      alert('Error saving plan.');
+      setSafetyPlanStatus('Error saving plan.', 'error');
     }
   });
 
@@ -1291,6 +1317,7 @@ Sovereignty and service always.`;
 
   // Wire open buttons to activate focus trap
   safetyPlanBtn.addEventListener('click', function() {
+    clearSafetyPlanStatus();
     loadSafetyPlan();
     safetyPlanModal.classList.add('active');
     _activateSafetyPlanFocusTrap(safetyPlanBtn);
@@ -1299,6 +1326,8 @@ Sovereignty and service always.`;
   // Crisis panel safety plan button (if crisis panel is visible)
   if (crisisSafetyPlanBtn) {
     crisisSafetyPlanBtn.addEventListener('click', function() {
+      clearSafetyPlanStatus();
+      clearSafetyPlanStatus();
       loadSafetyPlan();
       safetyPlanModal.classList.add('active');
       _activateSafetyPlanFocusTrap(crisisSafetyPlanBtn);

tests/test_safety_plan_save_feedback.py

@@ -7,76 +7,45 @@ INDEX_HTML = ROOT / 'index.html'
 
 
 class TestSafetyPlanSaveFeedback(unittest.TestCase):
-    """Verify safety plan save feedback uses inline UI instead of blocking alerts."""
-
     @classmethod
     def setUpClass(cls):
         cls.html = INDEX_HTML.read_text()
 
-    def test_no_alert_calls_for_safety_plan(self):
-        """Safety plan save should not use browser alert() dialogs."""
-        # Find the save handler
-        save_handler_match = re.search(
-            r'saveSafetyPlan\.addEventListener.*?\}\);',
+    def test_modal_has_inline_status_live_region(self):
+        self.assertRegex(
             self.html,
-            re.DOTALL
+            r'<div[^>]+id="safety-plan-status"[^>]+role="status"[^>]+aria-live="polite"[^>]*>',
+            'Expected an inline polite live region for safety plan save feedback.',
         )
-        self.assertIsNotNone(save_handler_match, 'Expected saveSafetyPlan handler to exist.')
-        handler = save_handler_match.group(0)
-        self.assertNotIn('alert(', handler, 'Safety plan save handler should not contain alert() calls.')
 
-    def test_inline_status_element_exists(self):
-        """Safety plan modal should have an inline status element."""
-        self.assertIn('id="sp-status"', self.html, 'Expected sp-status element in the modal.')
-        self.assertIn('aria-live="polite"', self.html, 'Expected sp-status to have aria-live="polite".')
-
-    def test_inline_status_shows_on_save(self):
-        """Save handler should show the status element on success."""
-        save_handler_match = re.search(
-            r'saveSafetyPlan\.addEventListener.*?\}\);',
+    def test_save_feedback_does_not_use_blocking_alerts(self):
+        self.assertNotIn(
+            "alert('Safety plan saved locally.')",
             self.html,
-            re.DOTALL
+            'Expected success feedback to stop using blocking alert().',
         )
-        handler = save_handler_match.group(0)
-        self.assertIn("statusEl.textContent = 'Safety plan saved locally.'", handler,
-                       'Expected success message in status element.')
-        self.assertIn("statusEl.className = 'success'", handler,
-                       'Expected success class on status element.')
-        self.assertIn("statusEl.style.display = 'block'", handler,
-                       'Expected status element to be displayed.')
-
-    def test_inline_status_shows_on_error(self):
-        """Save handler should show the status element on error."""
-        save_handler_match = re.search(
-            r'saveSafetyPlan\.addEventListener.*?\}\);',
+        self.assertNotIn(
+            "alert('Error saving plan.')",
             self.html,
-            re.DOTALL
+            'Expected error feedback to stop using blocking alert().',
         )
-        handler = save_handler_match.group(0)
-        self.assertIn("statusEl.className = 'error'", handler,
-                       'Expected error class on status element.')
-        # Error message should mention local storage blocking
-        self.assertIn('blocking local storage', handler,
-                       'Expected error message about local storage blocking.')
 
-    def test_status_auto_hides_after_success(self):
-        """Success status should auto-hide after a timeout."""
-        save_handler_match = re.search(
-            r'saveSafetyPlan\.addEventListener.*?\}\);',
+    def test_save_logic_updates_inline_status_for_success_and_error(self):
+        self.assertRegex(
             self.html,
-            re.DOTALL
+            r'function\s+setSafetyPlanStatus\s*\(',
+            'Expected a helper to update inline save feedback.',
+        )
+        self.assertRegex(
+            self.html,
+            r"setSafetyPlanStatus\('Safety plan saved locally\.'\s*,\s*'success'\)",
+            'Expected success path to update inline status.',
+        )
+        self.assertRegex(
+            self.html,
+            r"setSafetyPlanStatus\('Error saving plan\.'\s*,\s*'error'\)",
+            'Expected error path to update inline status.',
         )
-        handler = save_handler_match.group(0)
-        self.assertIn('setTimeout', handler, 'Expected setTimeout for auto-hiding status.')
-        self.assertIn("statusEl.style.display = 'none'", handler,
-                       'Expected status to be hidden after timeout.')
-
-    def test_status_css_exists(self):
-        """CSS for sp-status success and error states should exist."""
-        self.assertIn('#sp-status.success', self.html,
-                       'Expected CSS for sp-status.success class.')
-        self.assertIn('#sp-status.error', self.html,
-                       'Expected CSS for sp-status.error class.')
 
 
 if __name__ == '__main__':