javascript - 在点击监听器旁边添加按键事件——要监听哪些按键事件？

Question

我正在尝试为我的应用添加更多可访问性，因此我已将 eslint-plugin-jsx-a11y 添加到我的 eslint 进程中。这很好，但是我对 click-events-have-key-events 规则 ( https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md) 有疑问。

我想在我的 react 代码中使用 onClick 的任何地方添加 onKeyDown 或 onKeyPress 。但是我不确定我应该听哪个键码。

如果，例如，我只是这样做

  <div
     onClick={this.myFunction}
     onKeyDown={this.myFunction}
     />

当我离开那个 div 时，onKeyDown 函数会触发。所以我想我需要过滤 keyCodes，但是在尝试满足可访问性标准时，我不确定我需要听取哪个 keyCodes。输入 keyCodes 是否足够 - 例如，所有屏幕阅读器都遵守这一点吗？

寻找对此的一些见解，以帮助使我的应用程序更易于访问和屏幕阅读器友好。

Answer 1

您没有具体询问这个问题，但最好的解决方案是尽可能使用 native html 元素。查看first rule of ARIA use . native 元素具有内置于元素中的行为，并且与屏幕阅读器配合得很好。

但是，有时您需要创建自定义元素，这就是ARIA 的地方。进来了。但是你需要两者attributes和一个 role制作自定义元素，如果该元素是交互式的，您还需要键盘/鼠标处理程序。

您监听的键盘事件类型取决于 role .例如，如果您正在创建自己的 link元素，而不是使用 ，你会听 ENTER 键。如果您正在创建自己的 button ，你会听到 ENTER 和 SPACE 键。

您监听的按键类型在“WAI-ARIA Authoring Practices 1.1”中的设计模式中进行了解释。例如，请参阅按钮的“Keyboard Interaction”部分。