Understanding the `jsx-a11y/no-static-element-interactions` Error

jsx-a11y/no-static-element-interactions

This error occurs when a click event is added to static elements like div or span. These elements are not inherently interactive, so if the appropriate role attribute or other necessary properties are not assigned, an accessibility warning is triggered.

This error is often seen alongside the following message:

jsx-a11y/click-events-have-key-events

This error occurs when a click event is present, but keyboard accessibility is not ensured, which is similar to the previous error.

To resolve jsx-a11y/no-static-element-interactions error, you need to add a role attribute, set the tabIndex to make the element focusable, or replace it with an interactive tag like <button>.

<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => {
    if (e.key === 'Enter') handleClick(e)
  }}
>
  Click me
</div>

This way, you can provide accessibility to a div element.

In this case, the onKeyDown event is necessary to resolve the jsx-a11y/click-events-have-key-events error. It ensures that the click event can also be triggered via the keyboard.

However, if you are only trying to resolve the jsx-a11y/no-static-element-interactions error, adding role="button" and tabIndex={0} is sufficient, and the onKeyDown event is not required.