AI 摘要：文章探讨了在使用原生 HTML 的 <dialog> 元素时，关于焦点陷阱（Focus Trap）观念的转变。传统的无障碍（Accessibility）建议认为模态框必须将焦点限制在其内部，但作者通过研究发现，原生 <dialog> 的 showModal() 方法允许用户通过 Tab 键切换到浏览器地址栏等界面，这并非缺陷而是被 W3C 认可的有意设计。这种设计为用户提供了更好的逃逸机制和操作灵活性，因此在使用现代原生 API 时，手动编写焦点陷阱代码已成为过时的做法。

1. 核心发现与观念转变
• 作者在测试原生 <dialog> 的 showModal 方法时，发现焦点可以从对话框移动到浏览器地址栏，这挑战了传统的焦点陷阱（Focus Trap）原则。
• 经过深入研究 GitHub 相关讨论，确认如果使用原生 <dialog> 元素，手动实现焦点陷阱已被视为过时的建议。

2. 历史背景与规范误区
• Scott O’Hara 指出 WCAG 规范并未强制要求焦点必须锁定在对话框内。
• 传统的焦点陷阱建议主要针对早期的自定义脚本对话框，当时 inert 属性和原生 <dialog> 尚未得到广泛支持。
• ARIA 创作实践指南（APG）中的旧做法是为了在没有原生特性的情况下模拟行为，其复杂性远高于现在的原生实现。

3. 专家观点与无障碍优势
• 无障碍专家 Léonie Watson 认为，用户在对话框上下文中应拥有与普通页面相同的权利，即能够通过 Tab 键离开当前内容进入浏览器功能区（如地址栏、菜单等）。
• W3C 的 APA（Accessible Platform Architectures）工作组达成共识，维持原生 <dialog> 现有的行为。
• 允许焦点移出对话框有助于用户在不关闭模态框的情况下，打开新标签页查询信息或更改浏览器设置，提供了一种自然的“逃逸机制（Escape Mechanism）”。

4. 开发者结论
• 只要正确使用原生 Dialog API 的 showModal 方法，开发者无需再为焦点管理（Focus Management）感到焦虑，这极大简化了现代 Web 组件的开发难度。

CSS-Tricks

There is No Need to Trap Focus on a Dialog Element | CSS-Tricks

Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the <dialog> (even in modal mode).