本文详解如何在响应式移动端导航菜单中，利用 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 映射，即可让任意深度的导航面板具备一致、可靠、可访问的焦点控制能力——真正践行“渐进增强”与“无障碍优先”的现代前端工程实践。