Static elements interactions

From Doc:

Enforce non-interactive DOM elements have no interactive handlers. Static elements such as <div> and <span> should not have mouse/keyboard event listeners. Instead use something more semantic, such as a button or a link.

Valid interactive elements are:

<a> elements with href or tabIndex props
<button> elements
<input> elements that are not hidden
<select> and <option> elements
<textarea> elements
<area> elements

Reference: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md

From eslint suggested documentation, it was important to learn about this:

Case: this element is not a button, link, menuitem, etc. It is catching bubbled events from elements that it contains

If your element is catching bubbled click or key events from descendant elements, then the proper role for this element is presentation.

<div
  onClick={onClickHandler}
  role="presentation">
  <button>Save</button>
</div>

resolve this error by providing ...role="button" and tabIndex

<div
  onClick={onClickHandler}
  onKeyPress={onKeyPressHandler}
  role="button"
  tabIndex="0">
 Save
</div>