web-dev-qa-db-ja.com

onClickハンドラーにキーボードリスナーを追加する方法

私は次のものを持っています：

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;
}

Textareaのプレースホルダーをページの水平および垂直の中央に配置する必要があるため、これが必要です。テキストエリアがテキストを垂直方向に中央揃えできない場合、テキストエリアの高さを短くする必要があります。したがって、ユーザーがtextareaの外側をクリックし、textareaをクリックしていると考えて、textareaが自動的にフォーカスするようにする必要があります。

これにより、eslintエラーwが発生します。クリックハンドラーには、少なくとも1つのキーボードリスナーが必要です。上記を更新してeslintを渡すにはどうすればよいですか？

javascriptreactjstextareaeslint
8
AnApprentice

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でルールを無効にすることもできます。これは好みに依存すると思います。

10
Kaysser Kayyali

eSLINT文書から：

OnClickの強制には、onKeyUp、onKeyDown、onKeyPressの少なくとも1つが伴います。キーボードのコーディングは、マウスを使用できない身体障害を持つユーザー、AT互換性、およびスクリーンリーダーユーザーにとって重要です。

この場合、ルールを無効にするか、コードを更新できます。 Web標準を満たすようにコードを更新することをお勧めします。

 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>
        );
      }
    }
7
hannad rehman