Click Events必须有Key Events

在可见但是非交互元素上绑定click事件时，必须同时绑定key事件来保证网站的可访问性。这就是所谓的click-events-have-key-events规则。

这个规则的目的是确保无障碍用户（如使用键盘而不是鼠标的人）也能够使用交互元素。

如何修复

在非交互元素上绑定click事件时，需要为其添加key事件，以确保无障碍用户也能够使用交互元素。

// 不好的示例
<div onClick={() => doSomething()}>
  我是一个div
</div>

// 好的示例
<div
  onClick={() => doSomething()}
  onKeyDown={(e) => {
    if (e.keyCode === 13 || e.keyCode === 32) {
      doSomething();
    }
  }}
  tabIndex={0}
>
  我是一个div
</div>

在上面的示例中，我们为div添加了tabIndex属性来让它获取焦点，使其能够通过键盘访问。我们同时添加了onKeyDown事件来确保用户按下“Enter”或者“Space”键时，也能执行同样的操作。

如何禁用

如果你希望在特定情况下禁用该规则，你可以在你的代码中添加以下注释：

// eslint-disable-next-line jsx-a11y/click-events-have-key-events
<div onClick={() => doSomething()}>
  我是一个div
</div>

在代码中添加上述注释后，Eslint将忽略此规则的检查。

参考文献

• click-events-have-key-events | eslint-plugin-jsx-a11y