用途:为无障碍 Web 应用提供键盘焦点管理方案,确保仅用键盘的用户能顺畅操作复杂交互组件。
主要能力:
- 焦点陷阱(focus trap):在模态框、对话框、抽屉中限制焦点,防止焦点逃逸到背景内容,并处理 Escape 键关闭与释放陷阱。
- Roving tabindex:用于标签面板、菜单、工具栏,用方向键在条目间移动,保持复合组件只有一个 Tab 停靠点,支持 Home/End 快速跳转。
- 焦点恢复:关闭浮层或完成操作后,将焦点返回触发元素,保留交互上下文。
- 跳转链接:为键盘导航提供跳过链接,复杂布局可提供多个地标跳转。
- 焦点可见性:满足 WCAG 2.4.7,建议使用自定义 :focus-visible 保持一致性。
使用方式:资料给出 React Aria 的 FocusTrap 示例、roving tabindex 的 TabList 实现、useRestoreFocus 钩子等代码片段。关键决策包括:模态框用严格 FocusTrap,弹出层用软性 FocusScope;焦点始终恢复到触发元素;初始焦点视上下文而定,优先输入框。
限制与禁忌:禁止使用正数 tabindex 破坏自然 Tab 顺序;禁止无替代地移除焦点轮廓;禁止无 Escape 处理的焦点陷阱;禁止无用户预期的自动聚焦;禁止永久隐藏跳转链接(聚焦时必须可见)。
适用场景:模态框、对话框、抽屉、标签面板、菜单、工具栏等需要键盘无障碍的组件开发。相关技能包括 a11y-testing、design-system-starter、motion-animation-patterns。