키보드 수신기를 on 핸들러에 추가하는 방법클릭?

키보드 수신기를 on 핸들러에 추가하는 방법클릭?

나는 다음과 같은 것을 가지고 있다.

class MyTextArea extends React.Component {

  handleClick = () => {
    this.focus();
  }
    
  focus = () => this.ref.focus;

  handleRef = (component) => {
    this.ref = component;
  };

  render() {
    return (
      <div className="magicHelper" onClick={this.handleClick}>
        <textarea></textarea>
      </div>
    );
  }
}

내 CSS:

.magicHelper {
  width: 100%;
  height: 100%;
}
textarea {
  line-height: 32px;
}

나는 텍스트 영역의 자리 표시자가 페이지에서 수평과 수직으로 중심을 잡아야 하기 때문에 이것이 필요하다.텍스트 영역은 텍스트를 수직으로 중앙에 배치할 수 없는 경우 텍스트 영역의 높이를 짧게 유지해야 한다.따라서 사용자가 텍스트 영역을 클릭한다고 생각하여 텍스트 영역 바깥을 클릭할 때 텍스트 영역 자동이 초점을 맞출 수 있도록 해야 한다.

이로 인해 ESLint 오류가 발생함:

"Visible, non-interactive elements with click handlers must have at least one keyboard listener".

eslint를 통과하도록 위의 내용을 업데이트하려면 어떻게 해야 하는가?

https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md

이 규칙은 접근성 표준을 시행하는 것으로 보인다.

이를 바탕으로 코드를 변경하여 이와 같은 작업을 수행하십시오.

<div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleClick}>

eslint에서 규칙을 비활성화할 수도 있어, 선호도에 따라 다르겠지.

ESLINT 문서에서:

onClick 강제 적용에는 onKeyUp, onKeyDown, onKeyPress 중 하나 이상이 함께 제공된다.키보드의 코딩은 마우스, AT 호환성, 스크린리더 사용자 등을 사용할 수 없는 신체적 장애가 있는 사용자에게 중요하다.

이 경우 규칙을 실행 중지하거나 코드를 업데이트할 수 있다.웹 표준에 맞게 코드를 업데이트하는 것이 더 낫다.

 class MyTextArea extends React.Component {

      handleClick = () => {
        this.focus();
      }
      handleKeyDown = (ev) => {
          // check keys if you want
        if (ev.keyCode == 13) {
          this.focus()
         }
      }
      focus = () => this.ref.focus;

      handleRef = (component) => {
        this.ref = component;
      };

      render() {
        return (
          <div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
            <textarea></textarea>
          </div>
        );
      }
    }

나는 git 메시지를 할 때 이런 문제가 생겼어.나는 그 시간에 따라오는 코드를 가지고 있다.

<span onClick={myHome}  className="home__home-header__mybb__mybb-links__ML1" >

그것을 피하기 위해 나는 요소의 다음 속성을 사용했다.

아리아-아리아="진실"

케이서가 응답한 키보드 청취기를 하나 이상 추가하면 ESLint 경고/오류를 통과할 수 있다.그러나 나는 브라우저와 화면 판독기에 의해 클릭 가능한 것으로 인식되지 않는 요소에 클릭과 키보드 청취기가 있는 진짜 문제를 고치고 싶다.

오류 메시지("클릭 핸들러가 있는 시각적 비인터랙티브 요소에는 적어도 하나의 키보드 수신기가 있어야 함")는 생각할 때 많은 것을 설명한다. 사용자가 상호 작용하지 않고 정보를 표시하도록 만들어진 요소에 클릭 핸들러를 추가했다.키보드 수신기를 추가하는 것 외에도 커서를 호버의 포인터로 변경하고, 탭 색인, 역할 등을 추가하여 액세스 가능하고 이해할 수 있도록 해야 한다.

이를 위한 가장 좋은 해결책은 다음 사항을 변경하는 것이다.div의 요소button는 ESLint 경고를 해결하지만 모든 브라우저와 화면 판독기에 모든 종류의 포인터를 사용하여 클릭할 수 있는 대화형 요소임을 알려준다.

class MyTextArea extends React.Component {
  render() {
    return (
      <button className="magicHelper" onClick={this.handleClick}>
        <textarea></textarea>
      </button>
    );
  }
}

역할, onKeyPress 및 tabIndex 속성을 포함한 요소의 역할을 표시하십시오.

<div
  onClick={onClickHandler}
  onKeyPress={onKeyPressHandler}
  role="button"
  tabIndex="0">
  Save
</div>

on 대신 onMouseDown을 사용할 수 있음클릭

마우스를 사용할 수 없거나 사용하지 않으려는 사람들을 위해onclick핸들러는 충분하지 않을 수 있다.따라서 ESLint는 사용자가 다음 항목을 추가할 때까지 이 문제를 액세스 가능성 문제로 태그 지정onKeyDown핸들러도.

이 오류에 대한 자세한 내용은<img />태그, 당신은 그것을 다른 것으로 바꿀 수 있다.<input type="image" />태그. 다음에서 변경 내용:

<img alt="" src={} onClick={} />

다음으로:

<input type="image" alt="" src={} onClick={} />

참조URL: https://stackoverflow.com/questions/48575674/how-to-add-a-keyboard-listener-to-my-onclick-handler