弹层焦点锁定

为什么需要焦点锁定

当页面弹出自定义 Modal 或 Drawer 时，Tab 键的焦点可能跑到遮罩层后面——用户按下键盘却看不到任何元素在响应。这不是小问题：焦点丢失会导致键盘用户和屏幕阅读器用户完全无法操作弹层里的表单、按钮或链接，也破坏了 WAI-ARIA 的对话框模式。

很多人在组件库里直接用现成的 el-dialog，但项目里总有那么几个需要自己画的弹层：视觉要定制、交互要个性化，或者干脆不依赖任何 UI 框架。这时候焦点管理就全得自己兜底。

技能做了什么

核心思路很直接：用 focus-trap 把焦点圈在弹层内部。弹层根节点上调用 createFocusTrap 拿到一个实例，弹层打开时 activate()，关闭或卸载时 deactivate()，保证焦点在弹层内循环，Esc 键的关闭回调也可以配置。

推荐的实现步骤如下：

• 安装 focus-trap
• 弹层显示时（v-if 为 true）调用 activate()
• 弹层关闭时立即 deactivate()，包括组件卸载的场景
• 自测两件事：Tab 是否在弹层内循环；Esc 是否能正常关闭

弹层内部至少需要有一个可聚焦元素，否则 focus-trap 无法正常工作——这一点在实现时就要留意，不要等打开弹层后才发现里面空空如也。

注意边界

这个技能解决的是焦点圈定问题，不是完整的无障碍方案。它不会帮你做色彩对比度检测、语义角色标注或屏幕阅读器兼容性扫描。项目如果要过无障碍审计，还需要配合其他工具或人工测试。

另外有两个常见的坑：一是弹层激活后忘了 deactivate()，导致页面焦点卡死在弹层里，用户连 Tab 都出不去；二是空弹层没有按钮就直接 activate()，焦点找不到落脚点反而更容易出问题。实现时请务必处理这两个场景。