React - 将可访问性焦点设置为元素

Question

我在反应模板中有一个 h1 元素，如下所示：

<section className={containerClasses}>
    { headline && <h1 dangerouslySetInnerHTML={{ __html: headline }} />}
</section>

这个组件是页面组件的一部分，它向下滑动通知用户他们最后一次单击按钮的操作的结果。我需要能够将焦点放在 h1 元素上以满足可访问性要求，但不知道如何做到这一点。

我尝试过的：

我已经为组件添加了一个引用，并试图查看是否有任何可用的焦点方法但没有

 <section className={containerClasses}>
        { headline && <h1 dangerouslySetInnerHTML={{ __html: headline }} ref={this.focusElement} />}
 </section>

并尝试通过以下方式访问元素：

this.focusElement.current.focus()

任何协助都会很棒。谢谢。

Answer 1

您需要设置tabIndex 属性并调用this.focusElement.current.focus()。

tabindex="-1" 值将元素从默认导航流中移除，并允许它接收编程焦点。这意味着可以通过链接或脚本设置焦点。这对于不应导航到但需要将焦点设置为它们的元素可能很有用(source)。

如果您希望用户能够导航到您的 h1 元素，则应该将值设置为 0，这将包括默认导航顺序中的元素。

值 0 表示元素应按默认导航顺序放置。这允许原生不可聚焦的元素（例如<div>、<span>、<p> 和<a> 没有href）接收键盘焦点。链接和表单控件最适合几乎所有交互元素，但 tabindex="0" 允许其他元素具有焦点并能够触发交互(source)。

Answer 2

h1 标签和其他类似标签的问题在于它们本质上不是可聚焦的。但是，通过向标签添加tabindex，您应该能够以编程方式将焦点添加到元素：

• https://davidwalsh.name/tabindex-focus
• https://css-tricks.com/focus-styles-non-interactive-elements/

所以，你可以试试

<h1 tabindex="-1" .../>