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

标签 reactjs accessibility anchor

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

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

但是,由于我没有使用 native href 属性,因此当我聚焦链接然后按 Enter 时,此处理程序不会被激活。

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

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

最佳答案

一个<a>没有 href 的标签不再有效。不要尝试重新实现焦点和键盘逻辑,而是使用 button和你喜欢的风格。从语义上讲,如果它正在触发 onClick它很可能是 button并且将是最容易接近的。

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

关于reactjs - 如何为 React 中的链接创建可访问的 onClick 处理程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54007850/

相关文章:

Github Markdown 同页链接

node.js - React router 版本 4 没有显示任何内容

javascript - Axios Api 在 Heroku 中调用

reactjs - 当搜索或过滤器值更改时,如何从 Material UI 的数据网格中保持选择我的行

jquery - 将焦点设置为 fancybox 2

java - View 在可见时窃取辅助功能焦点

javascript - 有没有办法制作没有边框的Material ui Card

javascript getelementbyid ...如何 'get' "html"变量

jquery - anchor 偏移不起作用

javascript - anchor 标记在列表项中不起作用