jsx-a11y/anchor-has-content 정확성
해당 룰의 기능
앵커 요소가 내용을 가져야 하며, 그 내용이 화면 독자에게 접근 가능해야 한다는 것을 강제합니다.
접근 가능하다는 의미는 aria-hidden 속성을 사용하여 숨겨져 있지 않다는 것을 의미합니다.
다른 방법으로는 title 속성 또는 aria-label 속성을 사용할 수 있습니다.
왜 문제가 되는가?
내용이 없는 앵커 요소는 화면 독자를 이용해 이해를 돕는 사용자에게 혼란을 줄 수 있습니다.
예시
이 룰에 대한 올바른 코드 예시:
jsx
<a>앵커 콘텐츠!</a>
<a><TextWrapper /></a>
<a dangerouslySetInnerHTML={{ __html: 'foo' }} />
<a title='foo' />
<a aria-label='foo' />이 룰에 대한 잘못된 코드 예시:
jsx
<a />
<a><TextWrapper aria-hidden /></a>사용 방법
설정 파일이나 명령줄 인터페이스를 통해 이 룰을 활성화하려면 다음을 사용할 수 있습니다:
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/anchor-has-content": "error"
}
}bash
oxlint --deny jsx-a11y/anchor-has-content --jsx-a11y-plugin