Focus Trap Manual Test

Open index.html in a browser, then run these checks:

Test 1: Tab wraps to first element
1. Open safety plan modal
2. Tab through all elements until you reach "Save Plan"
3. Press Tab again → should wrap to close button (X)

Test 2: Shift+Tab wraps to last element
1. Open safety plan modal
2. Focus is on "Warning signs" textarea
3. Press Shift+Tab → should wrap to "Save Plan" button

Test 3: Escape closes modal
1. Open safety plan modal
2. Press Escape → modal closes
3. Focus returns to the button that opened it

Test 4: Background not reachable
1. Open safety plan modal
2. Try to Tab to the chat input behind the modal
3. Should NOT be able to reach it

Test 5: Click buttons close + restore focus
1. Open modal via "my safety plan" button
2. Click Cancel → modal closes, focus on "my safety plan" button
3. Open again, click Save → same behavior
4. Open again, click X → same behavior

Automated checks (paste into DevTools console on index.html):


// Test focus trap
var modal = document.getElementById('safety-plan-modal');
var openBtn = document.getElementById('safety-plan-btn');
openBtn.click();
console.assert(modal.classList.contains('active'), 'Modal should be open');

var lastEl = document.getElementById('save-safety-plan');
lastEl.focus();
var evt = new KeyboardEvent('keydown', {key: 'Tab', bubbles: true});
document.dispatchEvent(evt);
// After Tab from last, focus should wrap to first
var firstEl = document.getElementById('close-safety-plan');
console.log('Focus after wrap:', document.activeElement.id);
console.assert(document.activeElement === firstEl || document.activeElement.id === 'sp-warning-signs',
  'Focus should wrap to first element');

// Test Escape
var escEvt = new KeyboardEvent('keydown', {key: 'Escape', bubbles: true});
document.dispatchEvent(escEvt);
console.assert(!modal.classList.contains('active'), 'Modal should close on Escape');
console.assert(document.activeElement === openBtn, 'Focus should return to open button');

console.log('All automated checks passed!');