eslint jsx-a11y no-static-element-interactions failed

eslint jsx-a11y no-static-element-interactions failed - how to fix it

TL;DR

Do not put event handlers on static elements like div and span: use an interactive element (button, link) or add an appropriate role. If the element must stay a div, the rule still fires, so restructure. One line of why: static elements have no interaction semantics, so handlers on them create controls that assistive tech cannot identify.

The error, verbatim

/app/src/components/Tile.jsx
  9:5  error  Visible, non-hidden elements with mouse or keyboard handlers must be interactive  jsx-a11y/no-static-element-interactions

Fix it step by step

Step 1: Reproduce on one file

npx eslint src/components/Tile.jsx --rule '{"jsx-a11y/no-static-element-interactions": "error"}'

Expected: ESLint prints the no-static-element-interactions error.

Step 2: Find every static handler host

npx eslint src | rg 'no-static-element-interactions' | head -20

Expected: Full list of static elements carrying handlers.

Step 3: Convert to interactive elements

rg -n 'onClick|onKeyDown' src/components/Tile.jsx | head -10

Expected: Shows the handlers to move onto button or link elements.

Step 4: Fix and re-lint

npx eslint src | rg -c 'no-static-element-interactions' || echo 0

Expected: Prints 0. The controls now expose real interactive semantics.

Step 5: Enforce it in CI

npx eslint src --max-warnings 0 | tail -3

Expected: Clean output; add the lint command to CI with max-warnings 0 so the violation cannot come back.

When to use this skill

• Your linter output names this exact jsx-a11y / a11y rule
• You want the violation fixed at author time so it never reaches axe or CI
• You are adding the rule to a shared eslint config and need the fix pattern

When NOT to use this skill

• The failure comes from axe-core or lighthouse at runtime, not from lint
• You plan to disable the rule project-wide, this skill shows the fix, not the escape hatch

Compatibility

eslint-plugin-jsx-a11y 6.7+ with eslint 8 or 9. Usually fires together with click-events-have-key-events and no-noninteractive-element-interactions. Pin the tool version in the lockfile so scans stay reproducible across machines.

Variant phrasings

elements with handlers must be interactive

The default message, same fix.

jsx-a11y div onClick static element

Practitioner phrasing for the clickable-div pattern.

the rule fires in the editor too

With the eslint extension installed, the same error appears inline while typing; the fix is identical.

Why it happens

The rule bans mouse and keyboard handlers on elements with no inherent interactivity (div, span, and friends). It fires even when you add role and tabIndex, because the recommended fix is a native interactive element. Codebases that style buttons as divs for design control trip it on every custom control. The rule has handlers and allowExpressionValues options for narrowing, but the default catches the common cases. Linter rules catch the violation at author time, which is cheaper than any runtime fix. When this rule fires across many files, fix the shared component and mention it in team onboarding so new code does not reintroduce it.

Edge cases

• Adding role=button to the div does not satisfy this rule, use a real button element.
• The rule ignores handlers on elements that are already interactive (button, a, input, select, textarea).
• allowExpressionValues can exempt conditional handlers, but restructuring beats config here.
• After fixing, run the whole lint suite once; a11y rules interact and one fix can surface the next violation.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_I00EVfp0BzuhPfMsEr45xw