如何将键盘监听器添加到我的 onClick 处理程序？

Question

我有以下内容：

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 自动聚焦。

这导致 ESLint 错误：

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

如何更新以上内容以通过 eslint？

Answer 1

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 中禁用该规则，我想这取决于偏好。

Answer 2

来自 ESLINT 文档：

Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.

在这种情况下，您可以禁用该规则或更新您的代码。最好更新您的代码以满足网络标准。

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

Answer 3

您可以通过添加至少一个键盘侦听器来传递 ESLint warning/error，如所回答。但我宁愿在这里解决真正的问题，即在浏览器和屏幕阅读器无法识别为可点击的元素上设置点击和键盘监听器。

错误信息("Visible, non-interactive elements with click handlers must have at least one keyboard listener")描述了很多，当你想的时候；您已将点击处理程序添加到用于显示信息而不是供用户与之交互的元素。除了添加键盘监听器之外，您还应该将光标更改为悬停时的指针，添加 tabindex、角色等，使其易于访问和理解。

解决这个问题的最佳方法是将 div 元素更改为 button，这解决了 ESLint 警告，但也告诉所有浏览器和屏幕阅读器这是一个交互式元素，您可以使用各种指针（鼠标、键盘、手指、手写笔）点击。

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

Answer 4

我在提交 git 消息时遇到了这种问题。我当时有以下代码。

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

为了避免它，我在元素中使用了以下属性。

aria-hidden="true"

Answer 5

您可以使用 onMouseDown 代替 onClick

Answer 6

对于无法或不想使用鼠标的用户，onclick 处理程序可能不够用。所以 ESLint 将此标记为可访问性问题，直到您也添加 onKeyDown 处理程序。

Answer 7

对于使用 <img /> 标签出现此错误的用户，您可以将其替换为 <input type="image" /> 标签。所以，从：

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

至：

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

Answer 8

用role、onKeyPress 和tabIndex 属性指示元素的作用：

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

如何将键盘监听器添加到我的 onClick 处理程序？

How to add a keyboard listener to my onClick handler?

javascript

textarea

reactjs

eslint