eslint jsx-a11y no-onchange failed onchange without label

eslint jsx-a11y no-onchange failed onchange without label - how to fix it

TL;DR

Label the control that owns the onChange: every select, checkbox, or radio with an onChange needs an associated label so users know what changing it does. Or move the action to a submit button. One line of why: onChange can fire the moment a selection changes, and without a label the user cannot predict what will happen.

The error, verbatim

/app/src/components/LocalePicker.jsx
  8:7  error  onChange must be accompanied by an accessible label  jsx-a11y/no-onchange

Fix it step by step

Step 1: Reproduce on one file

npx eslint src/components/LocalePicker.jsx --rule '{"jsx-a11y/no-onchange": "error"}'

Expected: ESLint prints the no-onchange error.

Step 2: Find every unlabeled onChange

npx eslint src | rg 'jsx-a11y/no-onchange' | head -20

Expected: Full list of onChange handlers missing labels.

Step 3: Label each control

rg -n 'onChange' src --glob '*.{jsx,tsx}' | head -20

Expected: Shows the handlers; add a label element, aria-label, or aria-labelledby to each control.

Step 4: Fix and re-lint

npx eslint src | rg -c 'jsx-a11y/no-onchange' || echo 0

Expected: Prints 0. Every onChange control now has an accessible label.

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. Targets select, checkbox, and radio inputs with onChange. Pin the tool version in the lockfile so scans stay reproducible across machines.

Variant phrasings

onchange must be accompanied by accessible label

The default message, same fix.

jsx-a11y select onchange no label

The classic: a language or locale picker select with no label.

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 exists because onChange on a select can trigger navigation or a data change immediately on selection, which is a change of context (WCAG 3.2.2) that must be predictable. A label tells the user what the control does before they change it. Unlabeled selects with onChange are common in locale pickers and filter dropdowns built quickly. The accessible-name check accepts label elements, aria-label, and aria-labelledby. 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

• If the onChange causes navigation, warn the user in the label text itself, like Language (changes page).
• onBlur plus a submit button is the safer pattern for consequential changes, onChange alone is risky.
• The rule checks the accessible name, a visible label plus htmlFor is the best fix.
• 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_pSky2LkhKcNCmkwriUdYww