Compare commits

..

2 Commits

Author SHA1 Message Date
Timmy
84569659b0 fix: crisis overlay focuses enabled Call 988 link instead of disabled button (closes #69)
All checks were successful
Sanity Checks / sanity-test (pull_request) Successful in 8s
Smoke Test / smoke (pull_request) Successful in 16s
The crisis overlay's showOverlay() was calling overlayDismissBtn.focus()
immediately after setting overlayDismissBtn.disabled = true. Disabled
elements cannot receive focus in browsers, so the overlay opened without
a valid keyboard focus target.

Changes:
- Focus the .overlay-call (Call 988 link) on overlay open — it's always
  enabled and the most important action for a user in crisis
- Move overlayDismissBtn.focus() to the countdown completion handler —
  the button focus now fires when it becomes enabled
- All existing tests pass (139 passed)
2026-04-14 22:07:45 -04:00
Timmy
2697b8ef75 [P3] Replace safety plan alert() with inline status feedback
- Add sp-status element with role="status" aria-live="polite"
- Add CSS for success/error states
- Replace alert('Safety plan saved locally.') with inline success message
- Replace alert('Error saving plan.') with inline error message
- Success status auto-hides after 4 seconds
- Error status persists until user action

Closes #73
2026-04-14 22:07:22 -04:00
3 changed files with 91 additions and 26 deletions

View File

@@ -680,7 +680,7 @@ html, body {
<!-- Footer -->
<footer id="footer">
<a href="/about.html" aria-label="About The Door">about</a>
<a href="/about" aria-label="About The Door">about</a>
<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>
@@ -1045,12 +1045,18 @@ 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);
overlayDismissBtn.focus();
// 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();
}
}
// Register focus trap on document (always listening, gated by class check)

View File

@@ -1,24 +0,0 @@
import pathlib
import unittest
ROOT = pathlib.Path(__file__).resolve().parents[1]
INDEX_HTML = ROOT / 'index.html'
ABOUT_HTML = ROOT / 'about.html'
class TestAboutLink(unittest.TestCase):
@classmethod
def setUpClass(cls):
cls.html = INDEX_HTML.read_text(encoding='utf-8')
def test_about_page_exists(self):
self.assertTrue(ABOUT_HTML.exists(), 'about.html should exist for static serving')
def test_footer_about_link_targets_static_about_html(self):
self.assertIn('href="/about.html"', self.html)
self.assertNotIn('href="/about"', self.html)
if __name__ == '__main__':
unittest.main()

View File

@@ -0,0 +1,83 @@
import pathlib
import re
import unittest
ROOT = pathlib.Path(__file__).resolve().parents[1]
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.*?\}\);',
self.html,
re.DOTALL
)
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.*?\}\);',
self.html,
re.DOTALL
)
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.html,
re.DOTALL
)
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.*?\}\);',
self.html,
re.DOTALL
)
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__':
unittest.main()