Static elements interactions

Question

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)?

Answer 1

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