jsx-a11y/no-noninteractive-tabindex 정확성

작동 방식

이 규칙은 비상호작용 요소가 키보드 탐색을 통해 상호작용 가능하게 만드는 tabIndex를 가지지 않도록 확인합니다.

왜 문제가 되는가?

탭 키를 통한 탐색은 페이지에서 실제로 상호작용 가능한 요소에 한해 제한되어야 합니다.
예를 들어, 순서 없는 목록의 항목에 tabIndex를 추가하여 보조 기술을 통해 탐색 가능하도록 하는 것은 불필요합니다.
이러한 요소들은 이미 페이지의 HTML 구조 기반으로 탐색 메커니즘을 제공하고 있습니다.
일반적으로 우리는 페이지의 탭 링크(탭 순환) 크기를 늘리는 대신 줄이는 데 집중해야 합니다.

예시

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

jsx

<div tabIndex="0" />
<div role="article" tabIndex="0" />
<article tabIndex="0" />
<article tabIndex={0} />

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

jsx

<div />
<MyButton tabIndex={0} />
<button />
<button tabIndex="0" />
<button tabIndex={0} />
<div />
<div tabIndex="-1" />
<div role="button" tabIndex="0" />
<div role="article" tabIndex="-1" />
<article tabIndex="-1" />

구성

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

allowExpressionValues

type: boolean

기본값: true

true인 경우, tabIndex 값으로 표현식 값(예: 변수, 삼항 연산자 등)을 허용합니다. false인 경우, 문자열 리터럴 값만 허용됩니다.

roles

type: string[]

기본값: ["tabpanel"]

상호작용으로 간주해야 하는 ARIA 역할의 배열입니다.

사용 방법

이 규칙을 설정 파일 또는 명령줄 인터페이스(클라이언트)를 통해 활성화하려면 다음과 같이 사용할 수 있습니다:

구성 파일 (.oxlintrc.json)CLI

json

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/no-noninteractive-tabindex": "error"
  }
}

bash

oxlint --deny jsx-a11y/no-noninteractive-tabindex --jsx-a11y-plugin

참고 자료

규칙 소스

작동 방식 ​

왜 문제가 되는가? ​

예시 ​

구성 ​

allowExpressionValues ​

roles ​

tags ​

사용 방법 ​

참고 자료 ​