[ESLint] div에 onClick 이벤트 달면 왜 안 되지?

Visible, non-interactive elements with click handlers must have at least one keyboard listener.

Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.

eslint jsx-a11y/click-events-have-key-events

jsx-a11y/no-static-element-interactions

 

이번 플젝부터 본격적으로 ESLint를 쓰기 시작했는데 

이게 약간 .... 온 동네 코드를 헤집고 다니며 시비를 건다 

div에 onClick을 다는 것까지도 .... 선언해놓고 사용하지 않은 변수라던가 ... 

/* */로 주석 달 때 주석 표기와 주석 내용 간의 띄어쓰기라던가 ... 

 

아니 근데 난 그냥 onClick을 단 게 아니다 이것도 나름의 사정이 있다

저 안에 들어가는 GoBack이라는 하위 컴포넌트가

말 그대로 뒤로가기 화살표 SVG라서 

여기에 따로 이벤트를 달면 모양새가 이상해진다

그래서 div 씌우고 onClick을 줬던 건데 내 마음도 모르고 

섭섭하군

 

솔직히 가장 쉽게 해결하는 방법은

 

        <div onClick={handleGoBack} role="presentation">

          <GoBack />

        </div>

 

role을 추가하는 것이다. 

 

아니면

'use client';

/* eslint-disable jsx-a11y/click-events-have-key-events */

/* eslint-disable jsx-a11y/no-static-element-interactions */

 

import GoBack from './(SVG_component)/GoBack';

type HeaderProps = {

  pageName: string;

};

export default function Header({ pageName }: HeaderProps) {

  const handleGoBack = () => {

    window.history.back();

  };

  return (

    <header className="bg-white w-full h-[7vh] flex items-center p-4">

      <div className="flex flex-grow">

        <div onClick={handleGoBack}>

          <GoBack />

        </div>

                 ... 

      </div>

    </header>

  );

}

 

/* eslint-disable jsx-a11y/click-events-have-key-events */

/* eslint-disable jsx-a11y/no-static-element-interactions */

 

이렇게 오류를 일으키는 룰을 콕 집어 disable 시킬 수도 있다. 

 

그렇지만? 이런 해결 방법들이 무슨 의미인지는 알아야겠지

 

References 

https://dalseoin.tistory.com/entry/aria-hidden-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-span%EC%97%90-onClick-%EB%8B%AC%EC%95%98%EB%8B%A4%EA%B0%80-%EB%A6%B0%ED%8A%B8-%EA%B7%9C%EC%B9%99-%EC%96%B4%EA%B8%8B%EB%82%98%EB%8A%94-%EB%AC%B8%EC%A0%9C

aria-hidden 알아보기 (span에 onClick 달았다가 린트 규칙 어긋나는 문제)

 

https://mystacks.tistory.com/81

eslint가 div에 onClick달아서 화낼 때 화해하기

 

자 이제 다시 일 하러 가자