一旦模态打开，模态的按钮首先是可选项卡的

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>元素的支持最近变得更好，您可以考虑使用它。