模态对话框必须捕获并限制键盘焦点在内部循环，首次打开时自动聚焦首个可交互元素，关闭时恢复原焦点，并通过aria-modal等属性确保无障碍访问。
模态对话框（Modal Dialog）必须捕获键盘焦点，防止用户误操作背景内容，并支持无障碍访问。核心是限制焦点在对话框内部循环，同时确保首次打开时自动聚焦到首个可交互元素。
打开时自动聚焦首个可聚焦元素
对话框显示后，应立即将焦点设在第一个可聚焦子元素上（如 input、button、带 tabindex="0" 的元素）。避免聚焦到对话框容器本身（除非显式设置 tabindex="-1" 并手动 focus）。
示例做法：
- 用 querySelector 查找第一个可聚焦元素：
dialog.querySelector('button, input, select, textarea, [tabindex]:not([tabindex="-1"])') - 若无匹配项，给对话框根元素设 tabindex="-1" 后调用 .focus()
- 推荐在 requestAnimationFrame 或 setTimeout(..., 0) 中执行，确保 DOM 已渲染
焦点限制在对话框内（焦点环）
监听 keydown 事件，拦截 Tab 键，计算当前聚焦元素在可聚焦列表中的位置，按需跳转到下一个或上一个元素，实现“首尾循环”。
立即学习“前端免费学习笔记（深入）”；
关键步骤：
- 用 Array.from(dialog.querySelectorAll(...)) 获取所有可聚焦子元素（同上选择器）
- 监听 document 或对话框的 keydown，当 e.key === 'Tab' 时阻止默认行为
- 找到当前聚焦元素索引，按下 Shift+Tab 时取前一项，否则取后一项；越界时绕回开头或末尾
- 对目标元素调用 .focus()
关闭时恢复原焦点并清理状态
关闭对话框前，应将焦点返回到触发它打开的元素（如按钮），提升用户体验和可访问性。
实现建议：
- 打开前缓存 document.activeElement，存储为对话框实例属性或 data- 属性
- 关闭时检查缓存元素是否仍存在于 DOM 且可聚焦，满足则调用 .focus()；否则退回到 body 或主内容区
- 移除焦点环监听器，避免内存泄漏
辅助支持：aria 属性与语义化
仅靠焦点管理不够，还需语义标记让屏幕阅读器正确识别模态上下文。
必需属性：
- role="dialog" 或 role="alertdialog" 加在对话框根元素上
- aria-modal="true"（现代浏览器中替代 aria-hidden 控制背景）
- aria-labelledby 指向标题元素 ID，aria-describedby 指向说明文字 ID
- 背景区域建议添加 aria-hidden="true"（当不使用 aria-modal 时）
