ReactでdivにonClickを持たせたい

なんとかしたいこと

ReactでdivにonClick属性を持たせようとしたら、以下の二つのエラーが出た。
click-events-have-key-events
no-static-element-interactions
これをなんとかしたい

環境

• ReactをTypeScriptで書いてる
• ESLintにAirbnb記法を勉強のために厳格めに入れてる

解決

原因はアクセシビリティに問題があるって話です。てかリファレンスにそう書いてあります。
アクセシビリティを解決できればいいのでやり方は何パターンかありますが、
リファレンスに書いてあるような方法が王道だと思います。

<div
  onClick={()=>{onClickHandler()}}
  onKeyPress={(e)={
    if(e.key==="Enter")onClickHandler();
    }}
  role="button"
  tabIndex="0">
  hoge
</div>

っていう風に、onClickの他に

• onKeyPress
• role
• tabIndex

の三つを追加すればいいです。

理解しよう

アクセシビリティとは、要は「身体障害者でも使えるWebページ」って意味です。
「このままだと一部の身体障害者が使えないWebページになるぜ」って怒られてたんですね。

今回怒られてるのは、主にマウスを使えない人が使用できないっていう点です。
言い換えると、キーボードだけで行えない操作を作っているってことです。

例えばbuttonなどは「イベントを発火するための要素」なので、ブラウザが自動でキーボードだけでイベントを発火可能なようにしてくれます。
つまりブラウザがアクセシビリティを保証してくれます。
しかしdivは本来そういった意味を持つ要素じゃないので、「このdivはbuttonのようにイベントを発火するよ」と明示的にブラウザに教えてあげないといけません。

role="button"

とすることで、「このdivはbuttonとして動作するよ」と宣言しています。

tabIndex="0"

とすることで、「Tabキーでこのdivにフォーカスを当てることができるよ」と宣言しています。

onKeyPress={(e)={
    if(e.key==="Enter")onClickHandler();
    }}

とすることで、「フォーカスが当たってるときEnterキーを押せばクリックと同じ動作になるよ」と宣言しています。

これでTabとEnterで、つまりマウスなしでイベントを発火できるようになりました。
たしかにアクセシビリティが改善されましたね。

参考

非対話型コンテンツにclickイベントを設定してはいけない理由

以上。