google.com 如何将标签焦点放在不可聚焦的元素上

Question

请访问 google.com 并搜索“字典”，通过 Tab 键导航并选择“跳至主要内容”：

step1

点击回车后，字典元素获得焦点：

step2

当我检查它时，它是一个带有 aria-level 属性但没有 tabindex 的 div。

step3

所以我的问题是，一个不可聚焦的元素如何才能像这样聚焦？

编辑：当我尝试将确切的 div 元素保存到全局变量中并调用 focus 时，它永远不会获得焦点。

Answer 1

当您对该消息按 Enter 时，JavaScript 代码会将 tabindex="-1" 添加到元素并使其聚焦。 输入之前：

之后：

当焦点离开元素（可能是blur 事件处理程序）时，JavaScript 代码会从元素中删除tabindex。

如果您右键单击该元素并在“元素”面板中显示它，您可以看到这一点，然后在您使用选项卡时观察该元素，直到您再次看到该元素。例如，如果您在打开元素面板和 Shift+Tab 后单击页面主体顶部附近的任意位置，最终您会再次看到相同的“显示主要内容”框，并且当您按下Enter 你可以看到tabindex 被添加（然后看到它在你离开时被删除）。