6

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

<a onClick={handleClick}>Link</a>

但是,由于我没有使用 nativehref属性,因此当我关注链接然后按 时,不会激活此处理程序Enter

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

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

4

2 回答 2

8

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

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

于 2019-01-02T23:24:03.697 回答
-1

你有正确的想法onKeyDown或需要设置一些东西。理想情况下,我建议使用像 Microsoft 的 FabricUI 或 Material 这样的库,它们在幕后完成所有这些工作。

或者,您可以使用对此类内容进行检查的 react-a11y 包。以下是对 onClick 的检查

https://github.com/reactjs/react-a11y/blob/master/docs/rules/click-events-have-key-events.md

于 2019-01-02T14:23:54.723 回答