Question

我在react模板中有一个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

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

因此，您可以尝试

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

Answer 2

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

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

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

值0表示元素应按默认导航顺序放置。这允许本地无法聚焦的元素（例如<div>，<span>，<p>和<a>，没有href）接收键盘焦点。链接和表单控件几乎是所有交互元素的最佳选择，但是tabindex =“ 0”允许其他元素具有焦点并能够触发交互(source)。

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

2 个答案: