← Back to rules

jsx-a11y/aria-activedescendant-has-tabindex 정확성

작동 방식

aria-activedescendant 속성을 가진 요소가 탭 가능하도록 강제합니다.

왜 문제가 되는가?

aria-activedescendant 속성이 있는 요소는 키보드 입력을 통해 이동할 수 있도록 탭 가능해야 합니다. 적절한 tabindex가 없으면 스크린 리더 사용자가 키보드로 해당 요소에 접근할 수 없으며, 이로 인해 기능이 접근 불가능하게 됩니다.

예시

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

const Bad = <div aria-activedescendant={someID} />;

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

const Good = (
  <>
    <CustomComponent />
    <CustomComponent aria-activedescendant={someID} />
    <CustomComponent aria-activedescendant={someID} tabIndex={0} />
    <CustomComponent aria-activedescendant={someID} tabIndex={-1} />
    <div />
    <input />
    <div tabIndex={0} />
    <div aria-activedescendant={someID} tabIndex={0} />
    <div aria-activedescendant={someID} tabIndex="0" />
    <div aria-activedescendant={someID} tabIndex={1} />
    <div aria-activedescendant={someID} tabIndex={-1} />
    <div aria-activedescendant={someID} tabIndex="-1" />
    <input aria-activedescendant={someID} />
    <input aria-activedescendant={someID} tabIndex={0} />
    <input aria-activedescendant={someID} tabIndex={-1} />
  </>
);

사용 방법

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

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/aria-activedescendant-has-tabindex": "error"
  }
}

CLI

oxlint --deny jsx-a11y/aria-activedescendant-has-tabindex --jsx-a11y-plugin

참고자료

• 규칙 소스