在使用 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 刪除鏈接樣式。