aria-modal="true" 仅声明模态上下文，不锁焦点、不阻止tab逃逸、不自动聚焦；需手动组合 focus()、focusin 监听和 aria-hidden 才能实现完整可访问性。
aria-modal="true" 不锁焦点，它只是一句“声明”，不是开关。
为什么 aria-modal="true" 在 Safari 和旧版浏览器里完全没用
这个属性本意是告诉辅助技术“这是模态上下文”，但 Safari（所有 iOS/macOS 版本）、旧版 Edge、部分 NVDA 配置下，它不触发原生焦点围栏。实测中：Tab 键照常跳到页脚、导航栏甚至 body；document.activeElement 常停留在 body，而非模态框内首个可聚焦元素。
- 它不阻止键盘焦点离开模态框容器
- 它不接管 Tab 键遍历顺序
- 它不自动聚焦首个可操作项
- 它不恢复关闭后的焦点位置
真正起作用的三件事：focus() + focusin + aria-hidden
必须手动组合这三项，才能让键盘用户不迷失：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 打开模态框后，立刻用
requestAnimationFrame(() => firstFocusable.focus())聚焦首个可聚焦元素（button、input、[tabindex="0"]） - 监听模态框根元素的
focusin事件，一旦发现!modalEl.contains(e.target)，立即event.preventDefault()并focus()回第一个可聚焦子元素 - 给背景内容容器（推荐用
<div id="app">，别直接动 <code>）动态加aria-hidden="true"，关闭时务必移除用
<dialog>.showModal()</dialog>在 Chrome/Firefox 中确实会禁用背景交互、设aria-modal="true"，但它在 Safari 中依然无法阻止Tab键逃逸——焦点照样溜出。更麻烦的是，如果模态框内没有显式可聚焦元素（比如只有文字和一个tabindex="-1"的标题），showModal()甚至不会触发任何聚焦行为。- 必须手动补
firstFocusable.focus()，不能依赖浏览器 - 必须监听
keydown拦截Tab和Shift+Tab，计算循环逻辑 - 嵌套
<dialog></dialog>时，每层都要独立缓存可聚焦元素列表和当前焦点索引
最易被忽略的一点：关闭后焦点必须回到触发按钮（如
id="open-settings-btn"），而不是document.body或随便一个div。否则屏幕阅读器会从头读起，用户彻底丢失上下文。 - 必须手动补
