ESLint: A control must be associated with a text label.(jsx-a11y/control-has-associated-label)

해당 에러는 ESLint 설정으로 인해 발생하는 에러입니다. (저는 Ariabnb를 사용했습니다.)

에러가 발견한 곳은 button 태그입니다.

 

 

728x90

 

 

문제

<button type="button" className={cx('btn-evaluation-like')} />

 

버튼태그 안에는 내용이 없고, className에 있는 이미지로 버튼을 대체하도록 만들었습니다.

이렇게 될 경우, 버튼에 대한 설명? 이 없기 때문에 발생하는 에러로 보입니다.

 

 

---

 

 

해결 방안

<button type="button" className={cx('btn-evaluation-like')} aria-label="Like Button" />

 

aria-label 속성을 추가해서 간단하게 어떤 버튼인지 넣어주면 됩니다.

 

아니면 아래 깃허브에서 제공하는 것처럼 eslint설정에 ignoreElements를 추가하시면 될 것 같습니다.

 

https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/control-has-associated-label.md