Static elements interactions

I have the following code:

Enabled = (id) => {
  let removal = null;
  if (!this.props.disabled) {
    removal = (
      <span
        className="chipRemove"
        onClick={() => this.onDelete(id)}
      >
        x
      </span>)
    ;
  }
  return removal;
}

it works well, but linter is giving me:
jsx-a11y/no-static-element-interactions

How can I solve this error (according to jsx-a11y)?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

resolve this error by providing …role=”button” and tabIndex

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

Method 3

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>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x