How to solve jsx-a11y/click-events-have-key-events and jsx-a11y/no-noninteractive-element-interactions issue?

Question

JavaScript

jsx code:

return (
      <li
        className="answers_block-answer answer"
        key={answer}
        onClick={handleClick}
      >
        <span className="answer_point" />
        {answer}
      </li>
    )

How to solve the problem with these errors:

Answer 1

If you are using a NOT interactive element (for example, a div, not a button), then add at least one event handling from onKeyUp, onKeyDown, onKeyPress.
https://github.com/evcohen/eslint-plugin-jsx-a11y/...
Or start using interactive elements button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, textbox
https:/ /github.com/evcohen/eslint-plugin-jsx-a11y/...
The easiest, but also the WORST option is to disable linter for specific rules in this file (insert at the beginning of the file):

/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */