aeoliancrazy 2018-11-13
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> )) }