Dialog 与 Popover 组件可访问性与焦点管理最佳实践

概述原生组件在焦点与可访问性方面更稳健；结合正确的 ARIA 与焦点陷阱，可减少自定义实现的风险。实践示例<button aria-controls="d1">打开</button> <dialog id="d1"> <form method="dialog"> <button value="close">关闭</button> </form> </dialog> const btn = document.querySelector('[aria-controls="d1"]') const dlg = document.getElementById('d1') btn.addEventListener('click', () => dlg.showModal()) dlg.addEventListener('cancel', () => dlg.close()) 验证方法使用键盘 Tab/Shift+Tab 验证焦点循环；检查可访问性树与可读性。注意事项结合 `inert` 隔离背景内容；为关闭提供明确按钮与 Esc 支持。