设置图像标签角色时按钮 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

您应该将<input type="image" /> 用于您的用例，它在语义上是正确的，您不需要添加role 或tabindex 或任何其他ARIA 标记来使其工作和访问。

有一个警告，因为点击后它实际上并没有恢复正常状态并保持焦点，因此您需要在 onClick 逻辑之后调用 blur。这是我几天前创建的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

OP 评论后更新

...但是在 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 也会触发警告。