programing

이벤트 핸들러를 사용하는 정적 HTML 요소를 수정하려면 역할이 필요합니다.

abcjava 2023. 3. 22. 20:35
반응형

이벤트 핸들러를 사용하는 정적 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.
다른 역할을 찾고 있는 경우, 여기에 일부 목록나열됩니다.
결손의 예roletab그게 필요했어요


편집: 댓글 요청에 따라 제 개인 오류는 다음을 추가함으로써 해결되었습니다.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

반응형