在使用 tabindex="0" 围绕它的 div 包装器后，按下输入锚标记不起作用

Question

我有一个问题，safari 没有关注我的锚元素，所以我在 div 周围使用了 tabindex="0"，现在按下输入链接在任何浏览器中都不起作用，如果我在做任何事情，请告诉我错误的。

    <div class="used__button" tabindex="0">
<a href="/new/sales/lights/red-lamps">Find Used</a>
</div>

在使用 tabindex 之前，该链接在按 Enter 时在 chrome 上工作，我使用 tabinde ="0" 将焦点放在选项卡上 safari 中的元素上，以实现可访问性。

Answer 1

您不应该将两个可聚焦元素一个放在另一个里面，因为不应该有两个可点击元素一个放在另一个里面。 这是无尽的奇怪错误来源，就像您在这里遇到的错误一样。

当您在内部元素中按 enter 时，事件是否应该冒泡？ 在这种情况下，是否应该同时发生多个动作？ 当内部元素聚焦时，外部元素是否仍然聚焦？ 我怎么知道有两个不同的区域，一个在另一个里面？ 这是一种不太清楚的问题，可能并不总是很好控制，和/或取决于浏览器。 简而言之，您和可能发现您的网站行为怪异的用户都不清楚。 所以你最好完全避免这种模式。

回到您的具体情况，您很可能应该从外部 div 中删除 tabindex=0 ，以便让内部链接正常工作。

或者，如果你真的认为 div 必须是可聚焦的，更好的解决方案是删除内部链接并将 div 更改为它所在位置的链接。 ARIA 的第一条规则是，如果你真的不需要，就不要使用它； tabindex 也是一样。 如果这不是您想要的，请使用 CSS 删除链接样式。