Question

我需要使image标签可点击，但是jsx-a11y发出警告，我该如何解决，我已经读过no-noninteractive-element-interactions，但是我不想在img标签周围包裹其他div标签，因为它将制作冗余标签，是否有其他方法可以解决此警告？

警告为[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逻辑之后调用模糊。这是几天前我为了消除对点击的关注而{@ 3}}。

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也会触发警告。

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

2 个答案: