← Back to rules

jsx-a11y/no-static-element-interactions 정확성

An auto-fix is available for this rule.

작동 방식

이 규칙은 이벤트 핸들러가 있는 정적 HTML 요소가 적절한 ARIA 역할을 가져야 함을 강제합니다.

왜 문제가 되는가?

정적 HTML 요소는 접근성 환경에서 의미 있는 구조를 가지지 않습니다.
이러한 요소에 클릭 또는 키보드 이벤트 핸들러가 부여될 경우, 보조 기술이 해당 요소의 상호작용 목적을 이해할 수 있도록 역할을 선언해야 합니다.

예시

이 규칙에 부적절한 코드 예시:

<div onClick={() => {}} />
<span onKeyDown={handleKeyDown} />

이 규칙에 적절한 코드 예시:

<button onClick={() => {}} />
<div onClick={() => {}} role="button" />
<input type="text" onClick={() => {}} />

구성

이 규칙은 다음 속성을 가진 구성 객체를 수용합니다.

allowExpressionValues

type: boolean

기본값: false

true로 설정 시, JSX 표현식(예: role={ROLE})으로 구성된 역할 속성 값을 허용합니다.
false로 설정 시, 문자열 리터럴 값만 허용됩니다.

handlers

type: string[]

기본값: null

이 규칙을 트리거할 이벤트 핸들러 이름 배열입니다(예: onClick, onKeyDown).

사용 방법

구성 파일 또는 명령줄 인터페이스에서 이 규칙을 활성화하려면 다음을 사용하세요:

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/no-static-element-interactions": "error"
  }
}

CLI

oxlint --deny jsx-a11y/no-static-element-interactions --jsx-a11y-plugin

참고 자료

• 규칙 소스