이벤트 핸들러를 사용하는 정적 HTML 요소를 수정하려면 역할이 필요합니다.
reactjs 스타일 컴포넌트에는 다음 코드가 포함되어 있습니다.
<a styling="link" onClick={() => this.gotoLink()}>
<SomeComponent />
</a>
이것은 정상적으로 동작하지만, eslint에서 다음과 같은 문제가 발생합니다.
Static HTML elements with event handlers require a role.
이 오류를 수정하려면 어떻게 해야 합니까?
이 경고를 피하기 위해 태그에 역할 소품을 추가해야 합니다(예: 단추).
<a role = "button" styling="link" onClick={() => this.gotoLink()}>
<SomeComponent />
</a>
당신의 앵커 태그에 HREF 소품이 없기 때문인 것 같습니다(잘 모르겠습니다).
저 같은 경우에는aria-hidden="true"
그리고 나서 나는 헌신할 수 있었다.
이전:
<i className="pwdicon" onClick={togglePasswordVisiblity} >
aria-hidden으로 업데이트한 후:
<i className="pwdicon" onClick={togglePasswordVisiblity} aria-hidden="true" >
내 문제는 해결되었다.
레퍼런스 링크: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md
이전 답변은 구체적인 예를 제시합니다. 제가 놓친 것은roles
.
다른 역할을 찾고 있는 경우, 여기에 일부 목록이 나열됩니다.
결손의 예role
이tab
그게 필요했어요
편집: 댓글 요청에 따라 제 개인 오류는 다음을 추가함으로써 해결되었습니다.role
그러나 허용되는 역할 목록이 누락되어 있습니다.Caiof의 코멘트에 의해, 상기의 리스트의 일부와 보다 완전한(또는 완전한) 리스트에 대해서는, 여기를 참조해 주세요.
역할을 명시적으로 설정해야 합니다.다음 코드를 시험해 보겠습니다.
<a role="button" styling="link" onClick={this.gotoLink}>
<SomeComponent />
</a>
그리고 보다시피 제가 수정했습니다.onClick
일반 선언 시 화살표 기능을 대체하여 핸들러를 만듭니다.번거롭고 비싼 계산을 줄일 수 있습니다.
아리아를 첨가하기만 하면 된다
<a aria-hidden styling="link" onClick={() => this.gotoLink()}>
<SomeComponent />
</a>
다음과 같이 'aria-hidden' 속성을 추가하면 됩니다.
<div onClick={handleClickCollectionCard} aria-hidden="true">
언급URL : https://stackoverflow.com/questions/54274473/how-to-fix-static-html-elements-with-event-handlers-require-a-role
'programing' 카테고리의 다른 글
WooCommerce 함수 wc_get_template() 수정 (0) | 2023.03.27 |
---|---|
페이지당 문서 제목을 설정하는 방법 (0) | 2023.03.27 |
함수의 워드프레스 var_dump.php (0) | 2023.03.22 |
유형을 사용하려면 JSON 개체(예: {"name" ""value"")가 필요하므로 JSON 어레이(예: [1,2,3])를 유형 '으로 역직렬화할 수 없습니다. (0) | 2023.03.22 |
사용자가 입력을 일시 중지할 때까지 지연되는 키 켜기 이벤트를 트리거하려면 어떻게 해야 합니까? (0) | 2023.03.22 |