내가 작성한 에러가 났던 코드
질문 리스트 페이지 작업 진행중에 h3태그에 onClick 이벤트를 추가했더니 발생했던 에러였다. 에러를 직역하자면 아래와 같다
클릭 핸들러가 있는 비 대화형 표시 요소에는 적어도 하나의 키보드 수신기가 있어야 합니다.
이게 무슨말인가 싶어 구글링을 했더니 keyboard 리스너를 달아야 한다는 의미였다. 아래 출처를 읽어보니, 내가 작성한 코드의 경우, 마우스를 사용할 수 없는 신체 장애가 있는 사용자, AT 호환성 및 스크린리더 사용자등에게 영향을 미치고 웹표준을 준수하지 못하는 코드이기 때문에 생기는 오류라고 생각했다.
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/click-events-have-key-events.md
위 출처에 나와 있는데로 아래와 같이 작성하였지만 "Non-interactive elements should not be assigned interactive roles" 에러가 발생하였고,
결국 아래와 같이 수정하여 오류를 해결했다.
