click-events-have-key-events

리액트 개발하다가 만난 린트 메세지에 관해 적어본다.

react 개발을 하다가 click-events-have-key-events 라는 메세지를 만났다.

jsx 린트 플러그인인 eslint-plugin-jsx-a11y (링크) 을 사용할 때 나타나는 메세지다.

jsx-a11y는 Ryan Florence라는 사람이 만든 플러그인으로 무려 2.3k의 star를 가지고 있는 프로젝트이다.

click-events-have-key-events 이벤트는 설명 에 따르면 onClick를 onKeyUp, onKeyDown, onKeyPress 없이 사용했을 때 보여주는 메세지다.

예시 코드에 따르면

<div onClick={() => {}} />

이렇게 쓰지 말고,

<div onClick={() => {}} onKeyDown={this.handleKeyDown} />
<div onClick={() => {}} onKeyUp={this.handleKeyUp} />
<div onClick={() => {}} onKeyPress={this.handleKeyPress} />
<button onClick={() => {}} />
<div onClick{() => {}} aria-hidden="true" />

이런 식으로 쓰라고 되어있다.

onKeyDown, onKeyUp, onKeyPress와 함께 쓰거나, button 태그를 사용하면 된다.

나는 button 태그로 바꿔서 사용했다.