如何为 React 中的链接制作可访问的 onClick 处理程序?
How do I make an accessible onClick handler for links in React?
我的 React 应用程序中有一个 link 调用 onClick
处理程序,如下所示:
<a onClick={handleClick}>Link</a>
但是,由于我没有使用本机 href
属性,当我聚焦 link 时,此处理程序不会被激活,然后按 Enter.
现在,我当然可以添加一个 onKeyDown
处理程序,然后检查按下的键是 Space 还是 输入,如果是,调用handleClick
。但是,恐怕这不足以捕捉到所有可访问性的细微差别,也不足以捕捉到它是否会像常规 links.
因此,问题是:有没有办法表明我希望在 link 后跟任何可能的交互方法时调用我的函数?
你的想法是正确的onKeyDown
或者需要设置一些东西。
理想情况下,我建议使用像 Microsoft 的 FabricUI 或 Material 这样的库,它们在幕后完成所有这些工作。
或者你可以使用 react-a11y 包来检查这些东西。以下是对 onClick
的检查
https://github.com/reactjs/react-a11y/blob/master/docs/rules/click-events-have-key-events.md
没有 href
的 <a>
标签不再有效。与其尝试重新实现焦点和键盘逻辑,不如使用 button
和您喜欢的样式。从语义上讲,如果它触发 onClick
,它很可能是 button
并且最容易访问。
供参考https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
我的 React 应用程序中有一个 link 调用 onClick
处理程序,如下所示:
<a onClick={handleClick}>Link</a>
但是,由于我没有使用本机 href
属性,当我聚焦 link 时,此处理程序不会被激活,然后按 Enter.
现在,我当然可以添加一个 onKeyDown
处理程序,然后检查按下的键是 Space 还是 输入,如果是,调用handleClick
。但是,恐怕这不足以捕捉到所有可访问性的细微差别,也不足以捕捉到它是否会像常规 links.
因此,问题是:有没有办法表明我希望在 link 后跟任何可能的交互方法时调用我的函数?
你的想法是正确的onKeyDown
或者需要设置一些东西。
理想情况下,我建议使用像 Microsoft 的 FabricUI 或 Material 这样的库,它们在幕后完成所有这些工作。
或者你可以使用 react-a11y 包来检查这些东西。以下是对 onClick
的检查https://github.com/reactjs/react-a11y/blob/master/docs/rules/click-events-have-key-events.md
没有 href
的 <a>
标签不再有效。与其尝试重新实现焦点和键盘逻辑,不如使用 button
和您喜欢的样式。从语义上讲,如果它触发 onClick
,它很可能是 button
并且最容易访问。
供参考https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md