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

dmki7575·2022년 4월 10일
0

TIL.Error

목록 보기
1/3
post-thumbnail

1.문제점

div에 감싸 바로 onClick 이벤트를 주니 아래와 같은 에러를 뱉는다

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

해석해보면 클릭 핸들러를 가지고 표시되는 비대화형 요소에는 최소한 하나의 키보드 리스너 jsx-a11y/click-events-have-key-events가 있어야 합니다.

2.해결 과정

해당 과정은 이러하다.
공용 모달에서 확인 버튼에 이미 링크 이동이 달려져 있었는데.....보통은 링크 이동을 하면 알아서 닫아지니(랜더가 다시 되니깐) 굳이 모달창을 닫는 로직을 추가 할 필요가 없었다.

하지만.....!

해당건은 링크 이동과 더불어 새창이 열리는 로직이여서 확인 버튼을 눌러도 모달이 여전한 현상이 있었다. 그래서 아 어쩌지? 이미 따로 커스텀 훅으로 뺀 곳에는 닫는 로직이 있어서 어떻게 끌고 올까 고심을 했다........
이미 그 링크 안에는 onClick 이벤트가 있었고,거기에 닫는 로직을 적어도 동작하지 않았다.
그래서 음?이거 그냥 그 확인에다가 div 로 감싸서 onClick 이벤트 주면 되겠네?싶었다.
(하지만 div에다가 하니 저 에러를 뱉어냈다.)

이게 가능한 이유는 어차피 여기 말고는 다 창이 알아서 닫아지기 때문입니다.


3.해결방법

해결도 결국...엄청 쉬운 문제였다.
저 에러 메세지는 바로 div에서 onClick을 줘서 문제였기에 따로 button으로 바꾸어서 해주었다.

<button onClick={close}>
  {confirm}
  .
  .
  .
 
</button>

저 글씨안에서만 또 창이 닫기니깐 버튼 css를 width,higth 100% 주면 된다.

Interactive
Interactive 요소는 핵심 상태를 포함하며 사용자 지정 상태의 추가를 지원한다고 합니다.

즉 저 말 즉슨 <button onClick={} /> 이 요소에 버튼의 타입과 같은 것들을 설정 해줘야 한다고 하는 말 같다.

더 찾아보니

Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. This does not apply for interactive or hidden elements.

이말 즉슨 Enforce onClick에는 다음 중 하나 이상이 수반 되는데,이게 onKeyUp, onKeyDown, onKeyPress이다.
키보드 코딩은 마우스를 사용할 수 없는 신체 장애가 있는 사용자, AT 호환성 및 스크린 리더 사용자에게 중요합니다. 이건 대화형 혹은 숨긴 요소에 적용되지 않는다!

해결책을 더 찾아보니 깃헙에 예시가 딱 있었다.

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

그러니깐 나는 div를 쓸거면 저렇게 써야지 해결이 되는거니 그냥 쉽게 button으로 설정하니 해결 되었다.

✍️ ✅

이번 문제는 너무 쉽게 해결 했지만 왜 발생했고 어떻게 다른 방향으로 해결하는지에 대해 배워서 재미 있었습니다.

참고했던 출처 목록
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/click-events-have-key-events.md

profile
꾸준히 성장하는 개발자 입니다 😊

0개의 댓글