一旦模態打開，模態的按鈕首先是可選項卡的

Question

我有一個報價列表，每個報價都有一個刪除按鈕，一旦點擊就會打開一個帶有另外 2 個按鈕的模式：刪除和取消。

當模態打開時，我希望能夠首先對這兩個按鈕進行制表符，但此時制表符繼續與行中刪除按鈕之后的其他可制表元素，最終在完成制表符回合后點擊按鈕。

有沒有辦法做到這一點？

<section tabIndex="-1" role="dialog" onClick={onCancel}>
  <section role="document" onClick={(e) => e.stopPropagation()}>
    <Button tabIndex="0" secondary className={Styles.cancel} onClick={onCancel}>
      {t("abort")}
    </Button>
    <Button tabIndex="0" secondary className={Styles.delete} onClick={onDelete}>
      {t("deleteModal.CTA")}
    </Button>
  </section>
</section>

Answer 1

Tab 在焦點所在的地方繼續。 您的代碼已經包含tabindex="-1" ，它允許在打開對話框元素后將其聚焦，在 JavaScript 中使用.focus() 。

如果對話內容包含語義結構 [...]，則建議在內容開頭將 tabindex="-1" 添加到靜態元素並最初關注該元素。

在您的情況下，對話框非常簡單，最好關注主按鈕而不是對話框本身。

請參閱ARIA 創作實踐指南 (APG) 中的對話框（模態）

您的對話框需要一個可訪問的名稱。 通常使用aria-labelledby屬性來引用對話框的標題元素，如果您沒有可視標題，則可以使用aria-label 。

在對話框中建立焦點陷阱也很重要，這意味着不能通過選項卡離開對話框，而只能通過關閉。 通常焦點會回到對話框元素。

瀏覽器對原生<dialog>元素的支持最近變得更好，您可以考慮使用它。