when image tag role be set button jsx-a11y show warning

Question

I need make image tag clickable, but I get a warning by jsx-a11y, how do I fixed it, I already read no-noninteractive-element-interactions, but I do not wanna wrap other div tag around img tag, because it will make a redundancy tag, so does any other way to fix this warning?

The warning is [eslint] Non-interactive elements should not be assigned interactive roles.

and my code is

  <img
    styleName="pic-id-code"
    src={picCodeImgSrc}
    alt="pic id code"
    onClick={this.refreshPicCodeImg}
    onKeyPress={this.handleKeyPress}
    role="button"
    tabIndex="0"
  />

Answer 1

You should use <input type="image" /> for your use case, it is semantically correct and you won't need to add role or tabindex or any other ARIA tags to make it work and accessible.

There is a caveat as this doesn't actually return to normal state after click and remains focused so you need to call blur after your onClick logic. Here's the simple demo I made few days back to remove focus on click.