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的占位符在页面中水平和垂直居中。鉴于textareas不能垂直居中文本，我需要保持textarea的高度短。因此，当用户点击textarea外部时，我认为他们正在点击textarea，textarea auto自动聚焦。

这导致了一个问题错误w：点击处理程序至少需要一个键盘监听器。如何更新以上内容以传递eslint？

Answer 1

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

这条规则似乎是强制执行辅助功能标准。

基于此，将代码更改为执行此类操作

superview

你也可以在eslint中禁用规则，我想这取决于首选项。

Answer 2

来自ESLINT文件：

强制onClick至少伴随以下其中一项：onKeyUp，onKeyDown，onKeyPress。键盘编码对于无法使用鼠标，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>
        );
      }
    }

Answer 3

您可以使用 onMouseDown 而不是 onClick

Answer 4

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

错误消息（“带有单击处理程序的可见的非交互式元素必须至少具有一个键盘侦听器”）在您考虑时会描述很多内容；您已在元素上添加了一个点击处理程序，以使其显示信息，而不供用户与之交互。除了添加键盘侦听器之外，您还应该将光标更改为悬停时的指针，添加tabindex，role等，以使其易于访问和理解。

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

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

Answer 5

提交git消息时遇到了此类问题。当时我正在遵循以下代码。

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

为避免这种情况，我在元素中使用了以下属性。

aria-hidden =“ true”

Answer 6

对于不能或不想使用鼠标的人，onclick 处理程序可能不够用。因此 ESLint 将此标记为可访问性问题，直到您添加 onKeyDown 处理程序为止。

Answer 7

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

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

到：

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

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

7 个答案: