本文详解如何在响应式移动端导航菜单中，利用 vanilla js 实现动态、可嵌套的焦点陷阱（focus trapping），确保键盘用户在任意展开的子面板内按 tab / 方向键无缝循环聚焦，兼顾无障碍（a11y）与 dom 结构灵活性。
本文详解如何在响应式移动端导航菜单中，利用 vanilla js 实现动态、可嵌套的焦点陷阱（focus trapping），确保键盘用户在任意展开的子面板内按 tab / 方向键无缝循环聚焦，兼顾无障碍（a11y）与 dom 结构灵活性。
在构建符合 WCAG 2.1 标准的可访问导航组件时，“焦点捕获（Focus Trapping）”是关键实践之一：当模态面板（如汉堡菜单、下拉子菜单）打开后，键盘焦点必须被限制在该面板的可聚焦元素范围内，并在到达首/末元素时自动循环，避免焦点意外逃逸至页面其他区域或浏览器地址栏——这对屏幕阅读器用户和仅依赖键盘操作的用户至关重要。
然而，面对多层级嵌套结构（如主菜单 → 子面板 → 孙面板），静态绑定 keydown 事件或硬编码 first/lastElement 显然不可扩展。理想方案需满足三点：
✅ 动态识别当前活跃面板（active panel）
✅ 按需获取其内部所有可聚焦元素（
以下是一个健壮、解耦、生产就绪的实现方案：
✅ 步骤 1：定义可聚焦元素选择器
为兼容各类语义化标签，采用标准 CSS 选择器匹配所有可聚焦元素：
const FOCUSABLE_SELECTOR = 'button:not([disabled]), a[href]:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
⚠️ 注意：务必排除 tabindex="-1"（仅程序聚焦用）及禁用状态元素，避免逻辑错误。
立即学习“Java免费学习笔记（深入）”；
✅ 步骤 2：封装焦点捕获逻辑（核心函数）
/**
* 在指定容器内启用焦点循环捕获
* @param {Element} container - 当前活跃的面板 DOM 元素
*/
function trapFocusIn(container) {
const focusables = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
if (focusables.length === 0) return;
const first = focusables[0];
const last = focusables[focusables.length - 1];
// 移除旧监听器（防重复绑定）
container.removeAttribute('data-trap-id');
container.addEventListener('keydown', handleKeydown);
function handleKeydown(e) {
if (e.key !== 'Tab') return;
// Shift+Tab：从第一个跳到最后一个
if (e.shiftKey) {
if (document.activeElement === first) {
e.preventDefault();
last.focus();
}
}
// Tab：从最后一个跳到第一个
else {
if (document.activeElement === last) {
e.preventDefault();
first.focus();
}
}
}
// 首次打开时主动聚焦首个可聚焦项（提升 UX）
first.focus();
}✅ 步骤 3：与面板生命周期联动
将 trapFocusIn() 注入你的现有状态管理逻辑中。例如，在 openHamburgerMenu() 和 nextTopic() 中调用：
function openHamburgerMenu() {
navigation.classList.add("n-navigation--active");
navigationBlur.classList.remove("n-navigation__blur--hide");
navigationBlur.classList.add("n-navigation__blur--show");
this.setAttribute("aria-expanded", "true");
// 启用主面板焦点捕获
trapFocusIn(mainContainer);
}
function nextTopic(e) {
const panel = e.currentTarget.nextElementSibling;
panel.classList.add("n-navigation__mobile__mainContainer__mainList__panel--active");
// 启用新面板焦点捕获（自动移除旧面板监听）
trapFocusIn(panel);
}
function previousTopic(e) {
const panel = e.currentTarget.closest('.n-navigation__mobile__mainContainer__mainList__panel');
if (panel) {
panel.classList.remove("n-navigation__mobile__mainContainer__mainList__panel--active");
// 可选：恢复上一级面板焦点捕获
const parentPanel = panel.parentElement.closest('.n-navigation__mobile__mainContainer__mainList__panel');
if (parentPanel) trapFocusIn(parentPanel);
}
}✅ 进阶建议：支持方向键导航（可选）
若需支持 ArrowUp/ArrowDown 在列表项间移动（如垂直菜单），可在 handleKeydown 中扩展：
else if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
e.preventDefault();
const currentIndex = focusables.indexOf(document.activeElement);
let nextIndex = currentIndex;
if (e.key === 'ArrowDown') {
nextIndex = (currentIndex + 1) % focusables.length;
} else {
nextIndex = (currentIndex - 1 + focusables.length) % focusables.length;
}
focusables[nextIndex].focus();
}? 关键注意事项
- 性能与内存：每次调用 trapFocusIn() 前应清理旧监听器（通过 removeAttribute('data-trap-id') 或维护监听器引用），避免事件堆积。
- ARIA 同步：确保 aria-hidden="true" 应用于非活跃面板，aria-modal="true"（若为模态）；当前活跃面板需有 aria-expanded="true"。
-
关闭时释放焦点：在 closeMenu() 中，应将焦点返回至触发按钮（如汉堡图标），并清除所有 trap 监听器：
hamburgerMenuBtn.focus(); mainContainer.removeEventListener('keydown', handleKeydown); - 测试验证：使用键盘（Tab/Shift+Tab/方向键）全程操作，同时开启 NVDA/JAWS 屏幕阅读器验证语义流。
通过以上结构化实现，你无需依赖 Map 缓存或复杂 ID 映射，即可让任意深度的导航面板具备一致、可靠、可访问的焦点控制能力——真正践行“渐进增强”与“无障碍优先”的现代前端工程实践。
