← Back to rules

jsx-a11y/role-supports-aria-props 정확성

작동 방식

명시적 또는 암시적 역할이 정의된 요소가 해당 role에서 지원하는 aria-* 속성만 포함하도록 강제합니다.
많은 ARIA 속성(상태 및 속성)은 특정 역할을 가진 요소에서만 사용할 수 있습니다. 일부 요소는 암시적 역할을 가지며, 예를 들어 <a href="#" />는 role="link"로 해석됩니다.

왜 문제가 될까?

요소의 역할과 일치하지 않는 ARIA 속성을 사용하면 보조 기술이 페이지 콘텐츠를 이해하거나 상호작용하는 데 어려움을 겪을 수 있습니다.

예시

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

<ul role="radiogroup" "aria-labelledby"="foo">
    <li aria-required tabIndex="-1" role="radio" aria-checked="false">라인 밀고기</li>
    <li aria-required tabIndex="-1" role="radio" aria-checked="false">브룩 밀고기</li>
    <li aria-required tabIndex="0" role="radio" aria-checked="true">레이크 밀고기</li>
</ul>

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

<ul role="radiogroup" aria-required "aria-labelledby"="foo">
    <li tabIndex="-1" role="radio" aria-checked="false">라인 밀고기</li>
    <li tabIndex="-1" role="radio" aria-checked="false">브룩 밀고기</li>
    <li tabIndex="0" role="radio" aria-checked="true">레이크 밀고기</li>
</ul>

사용 방법

구성 파일 또는 CLI를 통해 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/role-supports-aria-props": "error"
  }
}

CLI

oxlint --deny jsx-a11y/role-supports-aria-props --jsx-a11y-plugin

참고자료

• 규칙 소스