onClick 에러메세지

Non-interactive elements should not be assigned mouse or keyboard event listeners

https://github.com/nala723/The-Dreamer/issues/98

• eslint의 rule에 의한 에러이다.

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

//에러
<li ref={addStagerRef}   onClick={()=>getSelectDate('latest')}>
     최신 순   
</li> 

//해결
<li ref={addStagerRef}  role='presentation'  onClick={()=>getSelectDate('latest')}>
  최신 순   
</li>