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

 

내가 하는 MERN에서는 portal을 통해 modal창과 backdrop이 각각존재한다. 그래서 backdrop 같은 경우는 모달 외 다른 영역이니까 클릭하면 그 창이 꺼지는 기능을 하는데, 여기서 ES-Lint 에러가 났다. 한번 읽어보자

 

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

가시적인, 클릭 핸들러가 있는 비-상호작용 요소는 최소 한개 이상의 키보드 리스너를 갖고 있어야한다.

 

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를 사용할 수 없다면 탭, 마우스, 키보드, 터치 입력 같은 상호적인 컨텐츠 요소를 지원할 수 있는 적절한 role 속성을 추가해주세요.

 

즉 여기있는 에러는 내가 DIV라는 non-interactive 한 요소에 onClick을 넣어줌으로써 해당 rule을 깨트린거 같다. 해당 룰에대한 가이드라인이 친절히 나와 있는 깃헙을 찾았다. 

 

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

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

 

처음에는 div를 최대한 그대로 나두고, onKeyDown 같은 속성을 더해서 사용하고 싶었으나, ES-Lint가 계속 허용해주지 않아서. native interactive 요소로 변경 후에 필요한 attribute인를 추가해주면서 아래 처럼 코드 수정 후 사용 가능했다.