dialog.showModal() 不自动完成焦点围栏，因其仅提供视觉模态而非键盘模态，需手动聚焦首个可聚焦元素、拦截Tab循环、关闭后恢复原焦点，否则不满足WCAG 2.1 AA标准。
dialog.showModal() 为什么不能自动完成焦点围栏
因为 showModal() 只保证视觉模态（backdrop、Esc 关闭、z-index 堆叠），不保证键盘模态。Safari 全版本、旧版 Edge 甚至部分 Chrome 场景下，document.activeElement 仍停留在 body，Tab 键直接穿透到页脚按钮——这不是“没聚焦”，是焦点管理压根没启动。
必须手动做三件事：打开后聚焦首个可聚焦元素、拦截 Tab 循环、关闭后回归原焦点。缺一不可，否则 WCAG 2.1 AA 直接不合规。
-
showModal()不会自动聚焦内部元素，除非你显式写了tabindex="0"或放了<input>等原生可聚焦标签 - 即使写了
open属性或用dialog.style.display = 'block'强行显示，也会绕过所有原生焦点逻辑，Esc失效、Tab穿透、::backdrop不响应点击 - 别信 “用了
<dialog>就不用管焦点” 的说法——那是把浏览器当理想环境，现实里 Safari 15.4+ 才开始支持基础showModal()，且焦点围栏始终缺失
如何安全获取并聚焦第一个可聚焦子元素
不能用 querySelector(':focusable')（Safari 不支持），也不能只查 button, input——漏掉 <a href> 和带 tabindex="0" 的容器，屏幕阅读器用户就卡住了。
正确过滤器是：button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'。聚焦动作必须包在 requestAnimationFrame() 里，否则 DOM 渲染未完成，querySelector 返回 null。
立即学习“前端免费学习笔记（深入）”；
- 若没找到匹配元素，给
<dialog>自身设tabindex="-1"后再.focus()，确保它至少能接收键盘事件 - 不要等 CSS 动画结束再聚焦——动画可能被用户禁用，或延迟导致焦点丢失
- 第三方库（如 Bootstrap Modal）若暴露了
shown.bs.modal这类事件，优先监听它，别自己硬等setTimeout(, 0)
Tab 键循环的监听位置和拦截边界怎么定
监听必须绑定在 <dialog> 元素上，不是 document。多层模态时，document 级监听会冲突；且无法准确判断当前焦点是否还在本层内。
关键不是“拦所有 Tab”，而是“只在焦点即将越界时干预”。先缓存所有合法可聚焦元素列表，再根据 event.key 和当前 document.activeElement 在列表中的索引决定跳转方向。
- 用
Array.from(dialog.querySelectorAll(selector))预生成列表，避免每次 keydown 都重新查 DOM - 只对
event.key === 'Tab'做preventDefault()，保留 Shift+Tab 的自然反向行为 - 判断越界时，别用
element.matches(':focusable')——改用getComputedStyle(element).visibility !== 'hidden' && getComputedStyle(element).display !== 'none'辅助过滤隐藏项
React 中 useRef + useState 组合为何是唯一安全方案
直接用 useState 控制 open 属性（比如 <dialog open={isOpen}>）会导致 React 销毁重建节点，showModal() 状态丢失、焦点回归失效、close 事件监听器被清空——这是 React diff 机制和原生 dialog 生命周期不兼容的硬伤。
必须用 useRef 持有对真实 DOM 节点的引用，在状态变更时手动调用 .showModal() 或 .close()，同时监听 close 事件同步更新 React 状态。
- 首次挂载后检查
ref.current?.hasAttribute('open')再决定是否聚焦，防止 SSR 渲染错乱 - 别在
useEffect里反复调用showModal()——Safari 下会报 “The element is already active” - 表单提交逻辑必须写在
onSubmit回调里，而不是靠按钮onclick，否则默认 form 提交会刷新页面，dialog.close()根本没机会执行
display: none 元素上，整个键盘导航链就断了。 
