ESLint: elements with click handlers must have at least one keyboard listener.

ESLint: Visible, non-interactive elements with click handlers must have at least one keyboard listener. (jsx-a11y/click-events-have-key)

 

由于ESLint检查强制非Button的 onClick 事件需要至少一个键盘事件。

键盘事件：

onKeyUp, onKeyDown, onKeyPress

 

<!-- 成功的onClick事件绑定在div上 -->
<div onClick={() => {}} onKeyDown={this.handleKeyDown} />
<div onClick={() => {}} onKeyUp={this.handleKeyUp} />
<div onClick={() => {}} onKeyPress={this.handleKeyPress} />

 

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

 

 

WARNING:

ESLint: Static HTML elements with event handlers require a role. (jsx-a11y/no-static-element-interactions

 

Fixed:

 

<div role="button" onClick={() => {}} onKeyDown={this.handleKeyDown} />

 

 

WARNING:

ESLint: Elements with the 'button' interactive role must be focusable. (jsx-a11y/interactive-supports-focus)

 

Fixed:

 

<div role="button" tabIndex="0" onClick={() => {}} onKeyDown={this.handleKeyDown} />

 

 

WARNING:

ESLint: Missing parentheses around multilines JSX (react/jsx-wrap-multilines)

 

Final Fixed:

 

{
  midBoxInfo.icons.map((v, i) => (
    <span
      key={i}
      role="button"
      tabIndex="0"
      onClick={() => this.goLink(v.link)}
      onKeyPress={() => this.goLink(v.link)}
    >
      <img alt="" src={require(`../../../static/images/for/${v.icon}`)} />
    </span>
  ))
}