如何为 React 中的链接创建可访问的 onClick 处理程序?

Vin*_*ent 5 accessibility reactjs web-accessibility

我的 React 应用程序中有一个链接调用onClick处理程序,如下所示:

<a onClick={handleClick}>Link</a>
Run Code Online (Sandbox Code Playgroud)

但是,因为我没有使用 nativehref属性,所以当我聚焦链接时,这个处理程序不会被激活,然后按Enter

现在,我当然可以添加一个onKeyDown处理程序,然后检查按下的键是否为SpaceEnter,如果是,则调用handleClick. 但是,我担心这不足以捕捉所有可访问性的细微差别,也不足以捕捉到它的行为是否与常规链接完全一样。

因此,问题是:有没有办法表明我希望我的函数在链接后跟随任何可能的交互方法时被调用?

小智 8

<a>没有的标签href不再有效。与其尝试重新实现焦点和键盘逻辑,不如根据button自己的喜好使用and 样式。从语义上讲,如果它正在触发 an,onClick它很可能是 abutton并且最容易访问。

供参考https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md