焦点捕获（trap focus）是手动限制键盘Tab键在模态框内循环聚焦的技术，因HTML原生不支持且dialog元素不自动限制Tab范围，必须用JS监听keydown、判断首尾可聚焦元素并强制focus，以满足WCAG 2.1 AA可访问性要求。
什么是焦点捕获（trap focus），为什么必须手动实现
HTML 原生没有 trapFocus 这种机制，模态框打开后键盘 Tab 仍会跳到背景元素，导致可访问性失败。这不是浏览器 bug，而是规范行为——dialog 元素虽支持 showModal()，但旧版 Safari 不支持，且即使支持，也**不自动限制 Tab 键范围**。必须用 JavaScript 主动监听 keydown、判断焦点位置、强制移回首/尾可聚焦子元素。
如何用 JS 实现最小可行的焦点捕获
核心逻辑就三步：记录模态框内第一个和最后一个可聚焦元素 → 监听 keydown → 按 Tab 方向把焦点“拽”回去。注意不是阻止事件，而是 event.preventDefault() 后调用 focus()。
- 只对
tabindex≥ 0、<a></a>、<button></button>、<input>、<select></select>、<textarea></textarea>等原生可聚焦标签生效 - 用
element.matches(':focusable')不可靠（Safari 不支持），改用getComputedStyle(element).visibility !== 'hidden' && getComputedStyle(element).display !== 'none'辅助过滤 - 首次打开模态框时，**必须主动调用
firstFocusable.focus()**，否则键盘用户无法进入
const modal = document.getElementById('my-modal');
const focusables = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const first = focusables[0];
const last = focusables[focusables.length - 1];
<p>function handleTab(e) {
if (e.key !== 'Tab') return;
if (e.shiftKey && document.activeElement === first) {
e.preventDefault();
last.focus();
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault();
first.focus();
}
}</p><p>modal.addEventListener('keydown', handleTab);
用 <dialog></dialog> 时还要 trap focus 吗
要。虽然 <dialog></dialog> 在 Chrome/Firefox 中调用 showModal() 后会禁用背景交互，但 Tab 键依然能离开模态框（尤其当内部无聚焦元素或含 tabindex="-1" 容器时）。Safari 更是完全不处理焦点限制。所以无论是否用 <dialog></dialog>，只要要求 WCAG 2.1 AA 合规，就必须手写 trap focus 逻辑。
-
<dialog></dialog>的close()方法不会自动恢复背景焦点，需手动存档并还原document.activeElement - 不要依赖
inert属性做焦点隔离——目前仅 Chromium 支持，且它不阻止focus()调用 - 如果模态框内容动态加载，必须在 DOM 更新后重新收集
focusables，否则列表失效
容易被忽略的边界情况
最常漏掉的是嵌套模态框和 iframe 场景。比如弹出一个模态框，里面嵌了第三方地图组件（iframe），而 iframe 内部有可聚焦元素——此时 Tab 到 iframe 里就彻底跳出控制了。没有通用解法，只能：iframe 加 tabindex="-1" 并监听其 focusin 事件再手动拉回；多层模态框则需维护栈式焦点上下文，每次打开新层前暂存上一层的 first/last 元素。
立即学习“前端免费学习笔记（深入）”；
另外，移动端 Safari 的「键盘切换应用」手势（双击 Home 键）可能绕过所有 JS 焦点控制，这是系统级行为，无法拦截——只能确保模态框关闭后页面焦点回到合理位置，避免用户迷失。
