>我有以下内容：
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 兼容性和屏幕阅读器用户非常重要。
在这种情况下，您可以禁用规则或更新代码。 最好更新代码以满足 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>
);
}
}
我在提交 git 消息时遇到了这种问题。我当时有以下代码。
<span onClick={myHome} className="home__home-header__mybb__mybb-links__ML1" >
为了避免这种情况，我在元素中使用了以下属性。
aria-hidden="true">
您可以通过添加至少一个键盘侦听器来传递 ESLint 警告/错误，正如 Kaysser(由 Kaysser) 回答的那样。但我宁愿在这里解决真正的问题，即在浏览器和屏幕阅读器无法识别为可点击的元素上具有单击和键盘侦听器。
当您考虑它时，错误消息("具有单击处理程序的可见非交互式元素必须至少有一个键盘侦听器")描述了很多内容;您已将单击处理程序添加到用于显示信息而不是供用户交互的元素。除了添加键盘侦听器之外，您还应该在悬停时将光标更改为指针，添加tabindex，角色等，以使其易于访问和理解。
最好的解决方法是将div元素更改为button，这解决了 ESLint 警告，但也告诉所有浏览器和屏幕阅读器这是一个交互式元素，您可以使用各种指针(鼠标、键盘、手指、手写笔)单击它。
class MyTextArea extends React.Component {
render() {
return (
<button className="magicHelper" onClick={this.handleClick}>
<textarea></textarea>
</button>
);
}
}
您是否因为不想要按钮的样式而将其设置为div，span或任何其他元素，而不是button？最好删除类似按钮的样式，只让它看起来更像div：
// CSS
.magicHelper {
display: block;
width: 100%;
padding: 0;
background-color: transparent;
border: none;
font: inherit;
text-align: inherit;
}
用角色、onKeyPress 和 tabIndex 属性指示元素的角色：
<div
onClick={onClickHandler}
onKeyPress={onKeyPressHandler}
role="button"
tabIndex="0">
Save
</div>
对于那些使用<img />标签收到此错误的人，您可以将其替换为<input type="image" />标签。因此，请从：
<img alt="" src={} onClick={} />
自：
<input type="image" alt="" src={} onClick={} />
您可以使用 onMouseDown 而不是 onClick
对于不能或不想使用鼠标的人来说，onclick处理程序可能不够。因此，ESLint 将此标记为可访问性问题，直到您也添加onKeyDown处理程序。