弹层焦点锁定
灵感：能力工具箱 focus-trap（弹层内键盘焦点不泄漏）。
> 小四原创：弹层根节点 → createFocusTrap → 打开 activate / 关闭 deactivate。
> Esc 可配置关闭回调。
何时使用
- 自定义 Modal / Drawer（非 Element Plus 自带）
- Demo 确认框键盘可达
- 无障碍：焦点不跑到遮罩后
硬约束
- 依赖：
focus-trap。 - 打开时
activate，关闭/卸载必须deactivate。 - 弹层内至少有一个可聚焦元素。
- 实现要点注释标 小四原创。
- 不做完整 a11y 扫描报告。
推荐实现
import { createFocusTrap, type FocusTrap } from 'focus-trap'
// 小四原创：弹层焦点陷阱
export function mountModalFocusTrap(
el: HTMLElement,
opts?: { onEscape?: () => void },
): { activate: () => void; deactivate: () => void } {
const trap: FocusTrap = createFocusTrap(el, {
escapeDeactivates: true,
allowOutsideClick: true,
onDeactivate: () => opts?.onEscape?.(),
})
return {
activate: () => trap.activate(),
deactivate: () => trap.deactivate(),
}
}
Agent 步骤
npm i focus-trap。- 弹层
v-if为 true 时 activate；关闭时 deactivate。 - 自测：Tab 循环在弹层内；Esc 可关。
不要做
- 激活后不 deactivate 导致页面焦点卡死。
- 空弹层无按钮却 activate。
附加
- README.md · reference.md · templates/usage.md
