eslint가 div에 onClick달아서 화낼 때 화해하기

에러가 난 부분 ..

<div
  className="px-40 mt-24 pb-31 grey-underbar"
  onClick={cookingTimeBtnHandler} // 여기
>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>    
</div>

 

Visible, non-interactive elements with click handlers must have at least one keyboard listener.

해석하면, 클릭 핸들러가 있는 비대화형 요소에는 키보드 리스너가 하나 이상 있어야 합니다.

 

https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/93f78856655696a55309440593e0948c6fb96134/docs/rules/click-events-have-key-events.md

GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.

 

대화형 요소 -> a, button 같은 유저가 사용가능한 interface들이다.

비대화형 요소에 마우스 이벤트가 있다면 마우스가 사용 불가능한 경우에는 해당 이벤트를 전혀 처리할 수 없으므로,

키보드를 통해서 조작가능해야한다고 하는 것이다.

방법 1. 키보드 이벤트 달아두기

방법 2. 대화형 요소로 전환하기

 

하지만, 나는 div 안의 버튼에 대해서 이벤트 위임을 위한 것이므로 예외 처리를 하였다.

---

Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.

해석하면, 네이티브가 아닌 대화형 요소는 피해야 한다. 네이티브 HTML을 사용할 수 없는 경우 대화형 콘텐츠 요소에 적절한 역할과 탭, 마우스, 키보드 및 터치 입력을 지원하는 기능을 추가합니다.

 

https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/93f78856655696a55309440593e0948c6fb96134/docs/rules/no-static-element-interactions.md

GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.

div나 span같은 의미 없는 html 요소들 혹은 비대화형 요소들에 이벤트를 추가한다면, role이나 탭, 마우스, 키보드, 터치 같은 이벤트 리스너를 달아야한다는 것.

 

그래서 role="presentation"을 쓰려고 했는데 쓰지말라고 한다. 의미가 사라지기 때문!

 

근데 role 중에서도 맘에 드는 것도 없고, 이벤트 위임을 위해서 div에 onclick을 추가한 것이기 때문에, 하위 항목에 버튼이 있어서 키보드로도 동작할 수 있다. 그래서 예외처리를 했음!

 

왜 예외인지도 말해주는 것을 권고하고 있어서 적어줬다.

{/* 이 요소의 하위 항목에 버튼이 존재하고 키보드 작동이 가능합니다. */}
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
<div
  className="px-40 mt-24 pb-31 grey-underbar"
  onClick={cookingTimeBtnHandler}
>

 

 

reference

https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/93f78856655696a55309440593e0948c6fb96134/docs/rules/no-static-element-interactions.md

https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/93f78856655696a55309440593e0948c6fb96134/docs/rules/click-events-have-key-events.md