Alexander Whitestone
611c1c8456
Some checks failed
Smoke Test / smoke (push) Has been cancelled
Merge PR #81 (squash)
85 lines
3.0 KiB
HTML
85 lines
3.0 KiB
HTML
<!-- Test: Safety plan modal focus trap (issue #65) -->
|
|
<!-- Open this file in a browser to manually verify focus trap behavior -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Focus Trap Test</title>
|
|
<style>
|
|
body { font-family: sans-serif; padding: 20px; }
|
|
.test { margin: 10px 0; padding: 10px; border: 1px solid #ccc; }
|
|
.pass { background: #d4edda; border-color: #28a745; }
|
|
.fail { background: #f8d7da; border-color: #dc3545; }
|
|
button { margin: 5px; padding: 8px 16px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Focus Trap Manual Test</h1>
|
|
<p>Open <code>index.html</code> in a browser, then run these checks:</p>
|
|
|
|
<div class="test" id="test-1">
|
|
<strong>Test 1: Tab wraps to first element</strong><br>
|
|
1. Open safety plan modal<br>
|
|
2. Tab through all elements until you reach "Save Plan"<br>
|
|
3. Press Tab again → should wrap to close button (X)
|
|
</div>
|
|
|
|
<div class="test" id="test-2">
|
|
<strong>Test 2: Shift+Tab wraps to last element</strong><br>
|
|
1. Open safety plan modal<br>
|
|
2. Focus is on "Warning signs" textarea<br>
|
|
3. Press Shift+Tab → should wrap to "Save Plan" button
|
|
</div>
|
|
|
|
<div class="test" id="test-3">
|
|
<strong>Test 3: Escape closes modal</strong><br>
|
|
1. Open safety plan modal<br>
|
|
2. Press Escape → modal closes<br>
|
|
3. Focus returns to the button that opened it
|
|
</div>
|
|
|
|
<div class="test" id="test-4">
|
|
<strong>Test 4: Background not reachable</strong><br>
|
|
1. Open safety plan modal<br>
|
|
2. Try to Tab to the chat input behind the modal<br>
|
|
3. Should NOT be able to reach it
|
|
</div>
|
|
|
|
<div class="test" id="test-5">
|
|
<strong>Test 5: Click buttons close + restore focus</strong><br>
|
|
1. Open modal via "my safety plan" button<br>
|
|
2. Click Cancel → modal closes, focus on "my safety plan" button<br>
|
|
3. Open again, click Save → same behavior<br>
|
|
4. Open again, click X → same behavior
|
|
</div>
|
|
|
|
<hr>
|
|
<h2>Automated checks (paste into DevTools console on index.html):</h2>
|
|
<pre><code>
|
|
// 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!');
|
|
</code></pre>
|
|
</body>
|
|
</html>
|