Firefox焦点样式未遵循正确Tab键切换顺序问题求助

在Firefox中点击页面左侧区域后按下Tab键，焦点会跳转到导航栏第3个元素而非预期的第1个，但该问题在Chrome中表现正常。尝试过设置tabindex为1、2、3，以及按DOM顺序设置tabindex=0，均未解决问题。

问题复现代码 #

HTML代码：

<div class="outter">
  <div class="inner">
    <!--- <div>test</div> --->
    <div class="one focus" tabindex="1">1</div>
    <div class="two focus" tabindex="2">2</div>
  </div>
</div>

CSS代码：

body {
  margin: 0;
}

.outter{
  display: flex;
  background-color: red;
  padding-left: 50px;
  justify-content: center;
}

.inner{
display: flex;
background-color: bisque;
padding:  10px;
}

.one{
  background-color: blue;
  padding: 50px;
 }

.two{
  background-color: green;
  padding: 50px;
}

.focus:focus{
  border: white solid 5px;
}

问题分析 #

Firefox与Chrome的焦点遍历逻辑存在差异：当页面无主动聚焦的元素时，Firefox会从页面的「视觉起始点」开始遍历焦点，而Chrome则严格按照DOM顺序启动遍历。另外，使用大于0的tabindex会强制改变焦点优先级，这种方式在不同浏览器中处理逻辑不一致，容易引发兼容性问题。

解决方案 #

1. 规范tabindex使用：避免使用大于0的tabindex，改用tabindex="0"让元素遵循DOM自然顺序参与焦点遍历，这是W3C推荐的可访问性最佳实践。调整后代码如下：

<div class="one focus" tabindex="0">1</div>
<div class="two focus" tabindex="0">2</div>

2. 主动控制初始焦点：如果需要在点击空白区域后，按Tab直接聚焦到第一个目标元素，可以通过JavaScript监听点击事件，当点击非可聚焦区域时，将焦点重置到document，或者直接设置到第一个目标元素：

document.querySelector('.outter').addEventListener('click', (e) => {
  if (!e.target.closest('.focus')) {
    document.body.focus();
    // 或者直接聚焦到第一个元素：
    // document.querySelector('.one').focus();
  }
});

3. 检查隐性可聚焦元素：排查页面中是否存在隐藏的可聚焦元素（如隐藏的input、带tabindex的元素），这些元素可能会被Firefox纳入焦点遍历队列，导致焦点跳转异常。

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