문제

<div onClick={onClickHandler}>
  ...
<div>

위의 같이 div에 onClick 이벤트를 줬더니 Visible, non-interactive elements with click handlers must have at least one keyboard listener라는 오류메세지가 떴다.

원인

대화형 컴포넌트가 아닌 컴포넌트에 onClick 이벤트를 줄 경우 AT 호환성 및 스크린리더 사용자도 키보드를 이용해 조작할 수 있게 하기 위해 eslint에서 오류로 나오는듯 하다.

해결 방법

div와 같은 non-interactive elements에 click 이벤트를 주려면 적어도 하나의 keyboardlistener을 줘야 한다.
keyboardlistener로는 onKeyDown, onKeyUp, onKeyPress 중 하나를 골라서 같이 적어주면 된다.

	<div onClick={onClickHandler} onKeyDown={onClickHandler}>
  ...
<div>

참고

jsx-a11y/click-events-have-key-events