Tabindex选中Div问题（Firefox特有）：是BUG还是隐含特性？

该现象仅出现在Firefox中（Chrome无此表现）：当div设置overflow: auto或overflow: hidden（仅overflow: clip不受影响）且高度小于内部div时，该div会被Tab键聚焦。已知添加tabindex="-1"可规避此行为，但不确定这是Firefox的BUG，还是对Tabindex规则的认知盲区。

示例代码：

<Input type="text" value="first input">
<div style="overflow: auto; height: 9px">
  <div style="padding-top: 10px; background-color: pink"></div>
</div>
<Input type="text" value="second input">

解答 #

这是Firefox针对可滚动容器的默认无障碍设计行为，并非BUG：

• Firefox会将设置了overflow: auto/hidden且内容溢出的容器识别为可交互滚动区域，为方便用户通过键盘操作滚动内容，默认赋予其隐式的聚焦能力，因此Tab键会遍历到该元素。
• overflow: clip不触发此行为的原因是：该属性仅裁剪超出容器的内容，不提供滚动功能（也不会生成滚动条），浏览器不会将其判定为可交互的滚动容器，自然不会赋予聚焦能力。
• 添加tabindex="-1"能规避该行为，是因为这个值明确指定元素可被聚焦但不会被Tab键遍历，直接覆盖了Firefox的默认隐式规则。

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