jsx-a11y/click-events-have-key-events と jsx-a11y/no-static-element-interactionsの対応

JavaScript React

備忘録

ソースコード

下記のコードは2つのエラーが発生します。

import React from 'react';

const Component = () => (
  <div
    onClick={() => {}}
  >
    {/* 何らかのコンテンツ */}
  </div>

);

export default Component;

エラー1.

Visible, non-interactive elements with click handlers must have at least one keyboard listener.eslint
(jsx-a11y/click-events-have-key-events)

エラー2.

Static HTML elements with event handlers require a role.eslint
(jsx-a11y/no-static-element-interactions)

jsx-a11y/click-events-have-key-eventsの対応

import React from 'react';

const Component = () => (
  <div
    onClick={() => {}}
+    onKeyDown={() => {}}
  >
    {/* 何らかのコンテンツ */}
  </div>

);

export default Component;

jsx-a11y/click-events-have-key-eventsの原因

onClickイベントを使用する場合、マウスを使用できないユーザーのために、
onKeyUp onKeyDown onKeyPressのうち、少なくとも1つを設定する必要がある。
（キーボードによる操作を可能にするため）

詳細

eslint-plugin-jsx-a11y/click-events-have-key-events.md at master · evcohen/eslint-plugin-jsx-a11y · GitHub

jsx-a11y/no-static-element-interactionsの対応

import React from 'react';

const Component = () => (
  <div
    onClick={() => {}}
    onKeyDown={() => {}}
+    role="button"
+    tabIndex={0}
  >
    {/* 何らかのコンテンツ */}
  </div>

);

export default Component;

jsx-a11y/no-static-element-interactionsの原因

divなどの静的なHTML要素にマウスやキーイベントを設定をする場合、
要素のロールを設定する必要がある。

詳細

eslint-plugin-jsx-a11y/no-static-element-interactions.md at master · evcohen/eslint-plugin-jsx-a11y · GitHub