button이 아닌 태그에 이벤트를 주었을 때

• 바닐라 자바스크립 때는 생각도 안 해봤던 문제이고
• React로 넘어오면서 부터는 eslint를 사용하고 있다.

Eslint란?

• 대부분의 프로그래밍 언어는 Linter가 기본 내장 되어 있지만, 자바스크립트는 내장 되어 있지 않다.
• 그래서 자바스크립트에서 발견되는 문제 패턴을 알기 위해서 Eslint라는 정적 코드 분석 도구를 사용한다.
• Eslint는 사용자의 설정에 따라 규칙을 엄격하게 할 수 있고, 기본적으로 필요하나 기능만 추가하여 사용하는 경우도 있다.

---

• Eslint를 사용할 때, 과도한 룰을 적용하게 되면 오히려 개발하는데 불편함을 겪기 때문에 지금껏 프로젝트들을 진행하면서 최소한의 룰만 적용하고 사용하였다.

그런데, 이번 프로젝트를 진행하면서 평소에 신경쓰지 않았던 문제이고, Eslint에서도 나오지 않았던 문제인데 sonarcloud에서 문제점을 지적해준게 생겼다.

바로 button이 아닌 태그에 이벤트를 주는 방식은 결코 옳은 방식은 아니라는 것이다.

다음과 같은 오류가 발생했는데, 이는 모두 button이 아닌 태그에 onBlur, onClick과 같은 이벤트를 주었기 때문에 문제라고 알려주었다.

해결방법

• 해당 문제점을 해결하기 위해서 문제가 발생한 각 태그에 role 속성을 추가해주는 것이었다.

role?

장애를 가진 사용자들을 위한 웹 콘텐츠 접근성을 개선하는 강력한 도구이다.
이 속성을 사용하여 웹 페이지의 구조와 의미를 명확하게 전달하고 상호 작용을 용이하게 만들 수 있다.
사용자들이 스크린 리더 및 보조 기술을 통해 웹 페이지를 이해하고 상호 작용할 수 있도록 돕는 중요한 기능이다.

role의 장점

1. 웹 접근성 개선
2. 시맨틱 마크업 강화
3. 검색 엔진 최적화 향상
4. 향상된 사용자 경험

• 문제로 지적한 이유는 아마 위에 적힌 장점들을 (SEO 향상) 알려주기 위해서 발생한 것 같다.
• 자세한 건 다음 링크를 참고

role에 관한 링크