Tab键循环至首个可聚焦DOM元素而非地址栏的问题咨询

1. 循环回首个DOM元素是否属于键盘陷阱？ #

算，这属于不符合WCAG可访问性标准的隐性键盘陷阱。WCAG要求用户必须能通过Tab/Shift+Tab自由进出页面交互区域，包括从页面内容切换到浏览器UI控件（地址栏、标签页等）。你的场景里，用户无法通过默认Tab操作离开页面到浏览器，只能在DOM内部循环，即便有Ctrl+L/Cmd+L这类替代方式，也违背了键盘导航的默认预期，会给依赖键盘操作的用户造成障碍。

2. 如何让Tab按键正常切换到浏览器？ #

核心问题出在你的focusin事件处理逻辑，而非Tab的keydown代码：
你的focusin事件中，只要currentItem存在就强制调用currentItem.focus()，这直接覆盖了浏览器的默认Tab导航行为。当用户在最后一个可聚焦元素按Tab时，浏览器本应把焦点移出页面到浏览器UI，但focusin事件触发后，又把焦点强制拉回了第一个元素。

具体修复步骤： #

1. 修改focusin事件逻辑，只在用户未主动聚焦树形组件内元素时设置默认焦点，不要强制覆盖浏览器的Tab行为：

focusin: function (e) {
    // 仅当焦点不在树形组件内时，才设置默认焦点
    if (!jqElement.contains(document.activeElement)) {
        currentItem = jqElement.children()[0];
        if (currentItem) {
            currentItem.focus();
        }
    }
}

2. 清理Tab按键处理逻辑：如果不需要自定义Tab导航，直接移除Tab相关的e.preventDefault()和手动聚焦代码，让浏览器默认Tab流程生效。如果要保留自定义Tab导航，需在到达边界时放弃拦截：

if (e.keyCode === keyCodes.Tab) {
    newFocus = e.shiftKey ? getPreviousTabTarget() : getNextTabTarget();
    // 没有找到自定义导航目标时，不阻止默认行为，让浏览器接管
    if (!newFocus) {
        return;
    }
    e.preventDefault();
    newFocus.focus();
}

3. 额外说明 #

你提到移除Tab相关代码后仍出现循环，就是因为focusin的强制焦点逻辑在起作用。W3的示例能正常工作，是因为它没有在focusin事件中强制覆盖浏览器的默认焦点行为，让Tab导航可以自然流出页面到浏览器UI。

内容的提问来源于stack exchange，提问作者brainAche