jsx-a11y/no-static-element-interactions

A <div> or a <span> says nothing about what it is. With a click handler, it works like a button for mouse users, but a screen reader only announces its text, so nobody else knows they can press it.

Use the real element, such as <button> or <a href>. If you can't, give the element a role that says what it is. An <a> without an href counts as static too.

Not reported:

• components
• elements with aria-hidden
• elements with role="presentation" or role="none". Use one of these for a handler that only catches events from children.

For elements that describe content, such as <li> or <p>, see jsx-a11y/no-noninteractive-element-interactions.

Configure#

Off by default. To turn it on:

[lint.rules]
"jsx-a11y/no-static-element-interactions" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"jsx-a11y/no-static-element-interactions" = ["error", {
  handlers = [
    "onClick",
    "onMouseDown",
    "onMouseUp",
    "onKeyPress",
    "onKeyDown",
    "onKeyUp",
  ],
  allowExpressionValues = false,
}]

Examples#

const close = <div className="close" onClick={closeDialog}>Close</div>;
const more = <a onClick={loadMore}>Show more</a>;

const close = <button className="close" onClick={closeDialog}>Close</button>;
const more = <button onClick={loadMore}>Show more</button>;

const custom = (
  <div role="button" tabIndex={0} onClick={closeDialog} onKeyDown={closeOnEnter}>
    Close
  </div>
);

const backdrop = <div role="presentation" onClick={closeDialog} />;

Options#

const card = <div onMouseEnter={showPreview} />;

const card = <div onMouseEnter={showPreview} />;

const cell = <div role={cellRole} onClick={selectCell} />;

const cell = <div role={cellRole} onClick={selectCell} />;