⭐

click-events-have-key-events & no-static-element-interactions

날짜

Dec 6, 2021

태그

eslint & prettier

참여자

키워드

span

div

시멘틱

접근성

⚠️문제발견

span 태그에서 onClick 메서드를 사용중에 아래와 같은 eslint 에러 메세지를 만났습니다.

해당 에러는 eslint규칙에서 eslint-plugin-jsx-a11y 룰을 사용할 때 만나는 규칙입니다.

이 규칙은 시멘틱, 접근성과 관련있습니다.

onClick 이벤트를 사용하기 위해서는 onKeyUp, onKeyDown, onKeyPress 이벤트 중 하나 이상을 같이 사용해야 한다는 규약입니다.

이는 시각장애인과 같은 유저들을 위한 접근성을 생각합니다.

허나 규칙대로 진행을 해도 타입스트립트와 함께 복잡하게 얽히는것 같아 아래와 같이 룰을 끄도록 하였습니다.


'jsx-a11y/click-events-have-key-events': 0,
'jsx-a11y/no-static-element-interactions': 0,