Tabindex根本不适用于DOM中

Question

我试图通过在代码中设置 tabindex=" 将焦点应用于处于活动状态的模态，但不幸的是浏览器(在 Chrome 和 FF 中检查(没有显示该属性。

为了解决这个问题，我尝试将 tabindex 提供给一个空白的div 标签，但它在那里也不起作用。

这是我编辑器中的代码。

<div className="modalBox" id="returnBookModalPanel" tabindex="0" role="dialog" aria-modal="true">
<div tabindex="0"></div>

---

浏览器呈现的代码

<div class="modalBox" id="returnBookModalPanel" role="dialog" aria-modal="true">
<div></div>

我也遵循可访问性标准 https://www.w3.org/TR/wai-aria-practices/#dialog_roles_states_props

Answer 1

我在 html 中添加了一些虚拟文本，但如果您运行代码段，您可以看到您可以按 Tab 键转到div。因此，浏览器不会忽略该属性。也许某些JS或其他东西正在删除该属性？

<div className="modalBox" id="returnBookModalPanel" tabindex="0" role="dialog" aria-modal="true">
Content 1
<div tabindex="0">Content 2</div>
</div>