Safari中的ShadowRoot处理

Question

当我在阴影DOM中放置可聚焦元素时，OSX Safari不在选项卡序列中包含它（与所有其他浏览器不同）。该按钮可见，可单击，但键盘用户无法访问。这是一个已知的错误？除了使组件成为可tabbable和转发焦点（这似乎很重要）之外，还有什么方法可以处理？

这是Safari控制台中的一个最小示例：

<div class="host">
  Shadow Content (Open)
    <button>Click me</button>
</div>

我通过在.attachShadow({"mode": "open"})上调用div.host，然后将其.shadowRoot.innerHTML设置为"<button>Click me</button>"来创建此示例

我在创建的组件中遇到此问题。我在Chrome中测试了上面的示例，并且按钮按预期包含在选项卡序列中。

Answer 1

Safari默认情况下不启用标签导航，必须通过首选项启用它。

Tab突出显示下一个文本字段或弹出菜单。标签也突出显示按钮和其他控件（如果在“系统偏好设置”的“键盘”面板的“快捷方式”面板。

Option-Tab突出显示与Tab相同的项目以及所有其他可点击的项目项目。

要交换Tab和Option-Tab的行为，请打开“按Tab在Safari的“高级”窗格中突出显示网页上的每个项目偏好设置。

https://support.apple.com/guide/safari/keyboard-and-other-shortcuts-cpsh003/mac