jsx-a11y/no-noninteractive-element-interactions

Elements such as <li>, <p>, <img>, <h1> and <main> describe content. A screen reader doesn't announce them as something you can press, and the Tab key skips them, so a click handler on one only works with a mouse.

An element with a non-interactive role, such as <div role="article">, is treated the same way. For <div> and <span> without a role, see jsx-a11y/no-static-element-interactions.

Not reported:

• components
• elements with an interactive role, role="presentation" or role="none"
• elements with aria-hidden or contentEditable="true"
• handlers set to null or undefined

Configure#

Off by default. To turn it on:

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

Examples#

const item = <li onClick={() => select(user)}>{user.name}</li>;
const card = <div role="article" onKeyDown={openCard} />;

const item = (
  <li>
    <button onClick={() => select(user)}>{user.name}</button>
  </li>
);

const option = <li role="option" tabIndex={0} onClick={() => select(user)} />;

Options#

By default onLoad and onError are allowed on <body>, <iframe> and <img>, and onKeyUp, onKeyDown and onKeyPress are allowed on <dialog>. Setting any option drops these defaults, so repeat the ones you want to keep.

const photo = <img src={url} alt="" onLoad={fadeIn} />;

const photo = <img src={url} alt="" onLoad={fadeIn} />;

const photo = <img src={url} alt="" onLoad={fadeIn} />;