TIL. Visible, non-interactive elements with click handlers must have at least one keyboard listener.
TIL.Error
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으로 설정하니 해결 되었다.
✍️ ✅
이번 문제는 너무 쉽게 해결 했지만 왜 발생했고 어떻게 다른 방향으로 해결하는지에 대해 배워서 재미 있었습니다.
