原生 元素默认不自动实现焦点循环（focus trapping），但会隔离外部可聚焦元素；开发者需主动实现焦点捕获与管理，以满足 WCAG 可访问性要求。
原生 `
HTML5 原生 <dialog></dialog> 元素为模态对话框提供了语义化、轻量级的原生支持，但在可访问性关键行为——尤其是 Tab 键焦点管理上，其默认行为常被误解。需要明确：浏览器（Chrome、Firefox 等）对 <dialog></dialog> 的当前实现是符合规范的，但“符合规范”不等于“开箱即用无障碍”。
根据 W3C ARIA Authoring Practices Guide 和 HTML Living Standard，<dialog></dialog> 在 showModal() 调用后，应将焦点限制在对话框内部，并确保焦点不会意外逃逸至地址栏、书签栏或页面其他区域。然而，现实是：
✅ 浏览器确实会忽略 dialog 外部所有可聚焦元素（如 <input>、<button></button>、<a href></a> 等）——这是焦点隔离（focus isolation）；
❌ 但不会自动实现焦点循环（focus trapping）：当用户 Tab 至 dialog 内最后一个可聚焦元素时，焦点不会自动跳回第一个，而是“离开 dialog 边界”，进入浏览器 UI（如地址栏、标签页）——这正是你观察到的行为。
这意味着：焦点管理（"manage focus"）的责任仍落在开发者身上。W3C 所说的 “Authors SHOULD manage focus” 指的是：
-
首次打开时聚焦内部首个可聚焦元素（如
<input>或dialog.querySelector('[autofocus]')或显式.focus()）； -
监听
keydown事件，拦截Tab键，手动控制焦点流向； -
维护 dialog 内所有可聚焦元素列表（可通过
dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')获取）； - 在 Tab 到末尾时，将焦点设回首个；Shift+Tab 到开头时，设回末尾。
以下是一个轻量、健壮的焦点循环实现示例：
function trapFocusInDialog(dialog) {
const focusable = Array.from(
dialog.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
)
).filter(el => !el.hasAttribute('disabled') && getComputedStyle(el).display !== 'none');
if (focusable.length === 0) return;
const first = focusable[0];
const last = focusable[focusable.length - 1];
const handleTab = (e) => {
if (e.key !== 'Tab') return;
if (e.shiftKey) {
if (document.activeElement === first) {
e.preventDefault();
last.focus();
}
} else {
if (document.activeElement === last) {
e.preventDefault();
first.focus();
}
}
};
dialog.addEventListener('keydown', handleTab);
// 清理建议：dialog.close() 时移除监听器
}调用方式：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
const dialog = document.querySelector('dialog');
dialog.addEventListener('click', (e) => {
if (e.target === dialog) dialog.close();
});
dialog.showModal();
trapFocusInDialog(dialog);
// 首次聚焦（推荐）
dialog.querySelector('input, button')?.focus();⚠️ 注意事项：
- 不要依赖
inert属性替代焦点管理（目前兼容性有限，且 inert 不影响 tab 键顺序逻辑）； - 使用
dialog.returnValue或dialog.close(value)后，务必手动将焦点恢复至触发 dialog 的源元素（如按钮），以维持焦点上下文； - Safari 目前对
<dialog></dialog>的showModal()支持较晚（v15.4+），且焦点行为略有差异，建议始终进行特性检测与降级处理； - 若项目需强兼容性或复杂交互，仍可考虑成熟方案如
<dialog-polyfill></dialog-polyfill>或react-aria/@radix-ui/react-dialog。
总结：原生 <dialog></dialog> 是语义与体验的进步，但它不是“无障碍银弹”。焦点循环虽非浏览器强制实现，却是 WCAG 2.1 成功标准 2.1.2（No Keyboard Trap）的刚性要求。真正的“管理焦点”，是开发者用代码补全规范留白的关键实践。
