오류일지 - Eslint와 onClick

 

Eslint를 설정한 뒤, 설정없이 사용하던 환경에 비해서 제약이 많이 생겼다.

예를 들어 buttton의 타입을 정하지 않으면 에러가 생기거나, 

아래의 예시처럼 span 요소에 onClick 이벤트를 적용시키면 오류가 발생하였다.

 

찾아보니 이것은 eslint의 rule에 의한 에러여서 조건과 해결방법을 조사하였다.

 

아래는 eslint의 제약 조건과 해결 방법들이다.

1. 비대화형 요소의 클릭 핸들러는 최소 하나의 키보드 리스너가 필요하다. 그 이유는 마우스를 사용할 수 없는 사람들이 키보드를 쓸 수 있게 함이다. 
   1. onKeyUp, onKeyDown, onKeyPress 이벤트를 할당
   2. 해당 엘리먼트를 button으로 바꿈
      • 모든 브라우저와 스크린리더들이 대화형 요소(interactive element)를 이용 가능(마우스,키보드,손가락 등)
   3. 해당 코드에 aria-hidden='true' 를 설정 ( 비추: 스크린 리더의 해당 엘리먼트의 존재를 알지 못함)
   4. eslint의 rule을 disable 처리 ( 비추 : 해당 룰 자체를 무시하게 됨)
2. 비대화형 요소에 마우스 혹은 키보드 리스너를 할당할 수 없다
   • 해당 엘리먼트에 role='presentation'을 추가
   • :semantic의미를 요소와 그 자식요소로부터 제거하기 위해서 사용한다. 시각적으로 게시하는 용도의 요소에 적용

 

결과적으로 aria-hidden 속성을 true로 변경시키고 실행하니 오류없이 화면이 나타났다.