AI 摘要：本文详细介绍了“焦点捕获（Focus Trapping）”的概念及其在创建可访问性模态对话框中的应用。焦点捕获是指将用户的焦点限制在特定元素内，确保焦点不会离开该区域，常用于提升网页可访问性。文章从理论到实践，逐步解析了如何通过代码实现焦点捕获，包括检测可聚焦元素、处理键盘事件（如 Tab 和 Shift+Tab）以及具体的实现步骤，同时推荐了 Splendid Labz 提供的工具库以简化开发过程。

1. 焦点捕获的基本概念
• 焦点捕获是指通过管理焦点，确保用户在特定元素（如模态对话框）内导航时，焦点始终保持在该元素内部。
• 具体规则：当用户在最后一个可聚焦元素上按 Tab 键时，焦点回到第一个元素；当用户在第一个元素上按 Shift+Tab 时，焦点回到最后一个元素。
• 应用场景：用于创建可访问性模态对话框，避免焦点离开对话框区域。
• 技术背景：虽然 dialog API 的出现减少了对焦点捕获的需求，但理解和实现这一技术仍然很重要。

2. 使用 Splendid Labz 实现简单焦点捕获
• 推荐使用 Splendid Labz 提供的工具库（如 @splendidlabz/utils/dom）来简化焦点捕获的实现。
• 代码示例：通过 getFocusableElements 获取可聚焦元素，并用 trapFocus 函数在 keydown 事件中管理焦点。
• 强调：虽然工具库使用简单，但文章将深入解析其内部实现原理，适合想深入学习或自行开发的读者。

3. 选择可聚焦元素（Selecting Focusable Elements）
• 可聚焦元素包括：<a>、<button>、<input>、<textarea>、<select>、<details>、<iframe> 等，以及具有 [contenteditable] 或 [tabindex] 属性的元素。
• 实现步骤：
• 使用 querySelectorAll 获取容器内所有潜在可聚焦元素。
• 过滤掉不可聚焦的元素（如 disabled、hidden 或 display: none 的元素）。
• 进一步筛选仅支持键盘焦点的元素（排除 tabindex < 0 的元素）。
• 添加 first 和 last getter 方法，分别获取键盘可聚焦元素列表的第一个和最后一个元素。
• 目的：为后续焦点捕获提供准确的元素列表。

4. 焦点捕获的实现方法（How to Trap Focus）
• 核心步骤：监听键盘事件（keydown），检测用户是否按下 Tab 或 Shift+Tab 键。
• 具体实现：
• 使用 event.key 和 event.shiftKey 判断按键类型，自定义 isTab 和 isShiftTab 函数。
• 通过 document.activeElement 确定当前焦点位置，判断是否需要转移焦点。
• 如果焦点在最后一个元素且用户按 Tab 键，则将焦点移至第一个元素；如果焦点在第一个元素且用户按 Shift+Tab，则将焦点移至最后一个元素。
• 使用 focus() 方法实现焦点转移。
• 总结：通过逐步拆解，焦点捕获的实现逻辑清晰且易于理解。

5. 对 Splendid Labz 的最终推荐
• 作者分享了个人开发经验，提到在构建应用时需要许多通用组件和工具库。
• 推荐 Splendid Labz 提供的库，旨在提升开发效率并改善开发者体验（DX）。
• 鼓励读者尝试这些工具，并感谢读者耐心阅读。

CSS-Tricks

A Primer on Focus Trapping | CSS-Tricks

Focus trapping is about managing focus within an element, such that focus always stays within it. The whole process sounds simple in theory, but it can quite difficult to build in practice, mostly because of the numerous parts to you got to manage.