代码之家 › 专栏 › 技术社区 › Aaron Balthaser

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

reactjs javascript

Aaron Balthaser · 技术社区 · 7 年前

我在react模板中有一个h1元素,如下所示:

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

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

我已经向组件添加了一个ref,并尝试查看是否有任何可用的聚焦方法,但没有

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

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

this.focusElement.current.focus()

任何帮助都会很好。谢谢

2 回复 | 直到 7 年前

wlh 7 年前

问题在于 h1 tabindex 对于标记,您应该能够以编程方式向元素添加焦点:

所以,你可以试试

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

Jamie 7 年前

你需要设置 tabIndex this.focusElement.current.focus() .

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

h1 元素,您应该将该值设置为0,该值将以默认导航顺序包含该元素。

值0表示元素应按默认导航顺序放置。这允许非本机聚焦的元素(例如 <div> <span> , <p> ,及 <a> 无href)以接收键盘焦点。链接和表单控件对于几乎所有的交互元素都是最好的,但是tabindex=“0”允许其他元素聚焦并能够触发交互 (source) .

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前