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.

Answer 2

You can disable eslint for a specify line like this

// eslint-disable-next-line THE-RULE-HERE
<img
    styleName="pic-id-code"
    src={picCodeImgSrc}
    alt="pic id code"
    onClick={this.refreshPicCodeImg}
    onKeyPress={this.handleKeyPress}
    role="button"
    tabIndex="0"
  />

Not sure what exactly your rule is but try this

// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions

or

// eslint-disable-next-line no-noninteractive-element-interactions

Update after OP comment

... but no work in react jsx

Try this

<img
        styleName="pic-id-code"
        src={picCodeImgSrc}
        alt="pic id code"
        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
        onClick={this.refreshPicCodeImg}
        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
        onKeyPress={this.handleKeyPress}
        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
        role="button"
        tabIndex="0"
      />

onClick and oneKeyPress on img will also trigger warnings.