когда роль тега изображения будет установлена ​​кнопка jsx-a11y показать предупреждение

Question

Мне нужно сделать тег изображения кликабельным, но я получаю предупреждение от jsx-a11y, как мне это исправить, я уже прочитал no-noninteractive-взаимодействия с элементами , но я не хочу оборачивать другие Тег 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. Вот простая демонстрация , которую я сделал несколько дней назад, чтобы убрать фокус с клика.

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

... но не работает в ответ 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"
      />

onClick и oneKeyPress на img также будут вызывать предупреждения.