"HTML dialog 元素：showModal/close 与无障碍实践"

概述`<dialog>` 提供标准化的对话框能力。`showModal()` 开启模式对话并锁定焦点；`close()` 关闭并可设置 `returnValue`。需处理可访问性（焦点环、按 Esc 关闭、读屏提示）与页面遮罩。示例<dialog id="dlg"> <form method="dialog"> <p>确认删除？</p> <button value="cancel">取消</button> <button value="ok">确定</button> </form> </dialog> <button id="open">打开</button> <script> const dlg = document.getElementById('dlg') document.getElementById('open').addEventListener('click', () => dlg.showModal()) dlg.addEventListener('close', () => { console.log('result:', dlg.returnValue) }) </script> 工程建议焦点与键盘：确保初始焦点在对话内；支持 Esc/Enter；提供明确关闭按钮。可访问性：设置标题与描述；读屏提示；避免隐藏焦点环。遮罩与层级：使用 `::backdrop` 控制遮罩样式与对比度；设置合理 `z-index`。参考与验证MDN `<dialog>` 文档：https://developer.mozilla.org/docs/Web/HTML/Element/dialogWHATWG HTML 规范相关章节：https://html.spec.whatwg.org/