svelte(a11y-click-events-have-key-events)

 

 

svelte로 개발하면서 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가 있어야 합니다." 

 

????????? Non-interactive HTML elements (비대화형 요소) ????????

---

Non-interactive HTML elements (비대화형 요소)와 Interactive HTML elements (대화형 요소)에는 어떤것이 있는지

아래 사진을 보면 된다.

 

click-events-have-key-events는 설명에 따르면 <main>, <area>, <h1> (,<h2>, etc), <img>, <li>, <ul> and <ol> 태그에 onKeyUp, onKeyDown, onKeyPress 없이 onClick을 사용할 때 보여주는 메세지다.

GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.

 

해결방법

<div onClick={() => {}} onKeyDown={this.handleKeyDown} />
<div onClick={() => {}} onKeyUp={this.handleKeyUp} />
<div onClick={() => {}} onKeyPress={this.handleKeyPress} />
<button onClick={() => {}} />
<div onClick{() => {}} aria-hidden="true" />

onKeyUp, onKeyDown, onKeyPress 을 넣어주던가

button, input 등 interactive HTML elements에 사용하던가

Non-interactive HTML elements에 aria-hidden="true"를 써주던가

하면 된다고 한다!

 

그나저나...  aria-hidden ?????????

---

MDN 설명링크

 

Description을 보면  비대화형 콘텐츠를 숨기는 데 사용할 수 있습니다. 라고 한다.

 

aria-hidden이 true로 설정되면, accessibility tree에서 해당 콘텐츠를 가리지만, 여전히 시각적으로는 볼수 있다.

주의 할 점은 , aria-hidden="true"가 focusable한 요소가 되어서는 안된다는 것이다.

스크린리더에는 보이지 않지만, focus가 되기 때문이다.

<!-- 안됨 -->
<button aria-hidden="true">press me</button>

 

나는 ESLint의 요구에 따라 aria-hidden="true"를 써줬다 ㅋ ㅋ ㅋ !!