当设置图像标签角色时，按钮jsx-a11y显示警告

Question

我需要使图像标签可点击，但我得到了一个警告由jsx-a11y，我如何修复它，我已经读取了no-noninteractive-element-interactions，但我不想包装其他div标签img标签，因为它会做一个冗余标签，所以有没有其他方法来修复这个警告？

警告是[eslint] Non-interactive elements should not be assigned interactive roles.

我的代码是

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

Answer 1

你应该在你的用例中使用，它在语义上是正确的，你不需要添加role或tabindex或任何其他ARIA标签来使它工作和可访问。

这里有一个警告，因为在点击之后，这实际上不会返回到正常状态，并且仍然是焦点，所以你需要在你的模糊逻辑之后调用onClick。这是我几天前制作的simple demo，用来消除点击时的焦点。

Answer 2

您可以为指定行禁用eslint，如下所示

// 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"
  />

不知道你的规则到底是什么，但试试这个

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

或

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

操作注释之后的更新

...但是在react jsx中没有工作

尝尝这个

<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"
      />

img上的onClick和oneKeyPress也会触发警告。