Question

60

Static elements interactions

rated 0 times [ 63] [ 3] / answers: 1 / hits: 26832 / 7 Years ago, tue, february 14, 2017, 12:00:00

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

Only authorized users can answer the question. Please sign in first, or register a free account.

mari

Add To Favorites

Follow

Total Points: 305

Total Questions: 100

Total Answers: 98

Location: Somalia

Member since Mon, Feb 27, 2023

1 Year ago

answered 7 Years ago reed · Accepted Answer

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