jsx-a11y/no-static-element-interactions: how to make span clickable

Question

In my project we have this lines of codes:

    <span
      onClick={this.toggleEditing}
    >
      {this.state.value}
    </span>

Needless to say, it produces an error in eslint with message "Visible, non-interactive elements should not have mouse or keyboard event listeners jsx-a11y/no-static-element-interactions". But I don't know what is the best way to fix this situation, should we change it to button and change style to look like a span. I really don't have much experience with this problem.

Answer 1

Look at the documentation it beautifully tells you what to do.
https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#how-do-i-resolve-this-error

For your case, the resolution is to add role="button"

<span onClick={this.toggleEditing} role="button">
  {this.state.value}
</span>