22

I have the following code:

Enabled = (id) => {
  let removal = null;
  if (!this.props.disabled) {
    removal = (
      <span
        className="chipRemove"
        onClick={() => this.onDelete(id)}
      >
        x
      </span>)
    ;
  }
  return removal;
}

it works well, but linter is giving me:

jsx-a11y/no-static-element-interactions

How can I solve this error (according to jsx-a11y)?

FacundoGFlores
  • 7,858
  • 12
  • 64
  • 94

2 Answers2

28

From Doc:

Enforce non-interactive DOM elements have no interactive handlers. Static elements such as <div> and <span> should not have mouse/keyboard event listeners. Instead use something more semantic, such as a button or a link.

Valid interactive elements are:

<a> elements with href or tabIndex props
<button> elements
<input> elements that are not hidden
<select> and <option> elements
<textarea> elements
<area> elements

Reference: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md

Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
21

resolve this error by providing ...role="button" and tabIndex

<div
  onClick={onClickHandler}
  onKeyPress={onKeyPressHandler}
  role="button"
  tabIndex="0">
 Save
</div>
D V Yogesh
  • 3,337
  • 1
  • 28
  • 39