eslint jsx-a11y no-redundant-roles error

Not specified by the original author.

eslint jsx-a11y no-redundant-roles error - how to fix it

TL;DR

Delete the redundant role: role button on a button element, role navigation on a nav element, and friends add nothing. The element's native semantics already do the job. One line of why: redundant roles are harmless today but they rot, the day someone changes the element and forgets the role, the two disagree.

The error, verbatim

/app/src/components/Nav.jsx
  4:5  error  The element nav has an implicit ARIA role of navigation. Defining this explicitly is redundant  jsx-a11y/no-redundant-roles

Fix it step by step

Step 1: Reproduce on one file

npx eslint src/components/Nav.jsx --rule '{"jsx-a11y/no-redundant-roles": "error"}'

Expected: ESLint prints the no-redundant-roles error.

Step 2: Find every redundant role

npx eslint src | rg 'no-redundant-roles' | head -20

Expected: Full list of elements carrying their own implicit role.

Step 3: Delete the redundant roles

rg -n 'role=.button|role=.navigation|role=.main' src --glob '*.{jsx,tsx,html}' | head -20

Expected: Shows the usual suspects to clean up.

Step 4: Re-lint

npx eslint src | rg -c 'no-redundant-roles' || echo 0

Expected: Prints 0. Native semantics now do the work with no duplication.

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. Also flags redundant roles on elements like img (role img) and headings. Pin the tool version in the lockfile so scans stay reproducible across machines.

Variant phrasings

element has implicit aria role defining explicitly is redundant

The default message, same fix.

jsx-a11y redundant role button

The classic: role button on an actual button element.

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

Authors add explicit roles defensively (role button on button) or copy them from examples without realizing the element already exposes that role. The rule maps elements to their implicit ARIA semantics and flags exact matches. It is a hygiene rule: redundant roles do not break anything today, but they double the maintenance surface and confuse future readers about intent. 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

• The rule has an allowRedundantRoles option for teams that want explicit roles as documentation, but deleting is cleaner.
• role presentation on an img IS redundant and flagged, use alt="" on img elements instead.
• Custom elements have no implicit role, so explicit roles on them never trigger this rule.
• 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_vt4yNmonxHhTqdbEnM1V6Q

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

Thread query: eslint jsx-a11y no-redundant-roles error

TL;DR: Delete the redundant role: role button on a button element, role navigation on a nav element, and friends add nothing. The element's native semantics already do the job. One line of why: redundant roles are harmless today but they rot, the day someone changes the element and forgets the role, the two disagree.

Not specified by the original author.

eslint jsx-a11y no-interactive-element-to-noninteractive-role failed - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. An interactive element (button, link, input) was given a non-interactive role like presentation or none, hiding it from assistive tech. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

eslint jsx-a11y no-interactive-element-to-noninteractive-role failed

Fix it step by step

Step 1

Remove the non-interactive role from the interactive element.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 2

If the element should not be interactive, change it to a non-interactive element instead of masking the role.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 3

Re-run eslint and confirm the element is reachable and announced again.

Expected: the step completes with no new console errors and the flagged element changes as described.

When to use this skill

• Your scan report lists this exact rule or failure
• You are clearing automated accessibility failures before release or audit
• A CI accessibility gate is red because of this item

When NOT to use this skill

• role presentation on a focusable element is contradictory; pick one semantic.
• The issue only appears in manual screen-reader testing and no automated rule flags it
• You are doing a full manual WCAG audit; this skill covers one automated check

Compatibility

eslint-plugin-jsx-a11y (rule no-interactive-element-to-noninteractive-role).

Variant phrasings

eslint jsx-a11y no-interactive-element-to-noninteractive-role failed

Same underlying issue and the same fix. Searchers phrase it different ways; the remediation does not change.

Why it happens

An interactive element (button, link, input) was given a non-interactive role like presentation or none, hiding it from assistive tech. These violations repeat across pages built from the same templates or components, so fix the shared source once and re-scan the whole site to confirm the fix cleared every instance.

Provenance

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

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

Thread query: eslint jsx-a11y no-interactive-element-to-noninteractive-role failed

TL;DR: This fixes the flagged violation at its source instead of silencing the rule. An interactive element (button, link, input) was given a non-interactive role like presentation or none, hiding it from assistive tech. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

Not specified by the original author.

eslint jsx-a11y tabindex-no-positive failed positive tabindex - how to fix it

TL;DR

Replace every positive tabindex with 0, -1, or a DOM reorder: positive values hijack the tab order into an explicit sequence that breaks the moment markup changes. One line of why: tab order should follow DOM order, and positive tabindex creates a fragile parallel order that assistive tech and keyboards experience differently.

The error, verbatim

/app/src/components/Modal.jsx
  30:9  error  Avoid positive integer values for tabIndex  jsx-a11y/tabindex-no-positive

Fix it step by step

Step 1: Reproduce on one file

npx eslint src/components/Modal.jsx --rule '{"jsx-a11y/tabindex-no-positive": "error"}'

Expected: ESLint prints the tabindex-no-positive error.

Step 2: Find every positive tabindex

npx eslint src | rg 'tabindex-no-positive' | head -20

Expected: Full list of positive tabIndex usages.

Step 3: Convert each one

rg -n 'tabIndex=.?[1-9]|tabindex=.?[1-9]' src --glob '*.{jsx,tsx,vue,html}' | head -20

Expected: Shows the exact lines to change to 0, -1, or a DOM reorder.

Step 4: Fix and re-lint

npx eslint src | rg -c 'tabindex-no-positive' || echo 0

Expected: Prints 0. Tab order now follows the DOM, which matches the visual order.

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. Zero config needed, the rule is a simple ban. Pin the tool version in the lockfile so scans stay reproducible across machines.

Variant phrasings

avoid positive integer values for tabindex

The default message, same fix.

jsx-a11y tabindex 1 2 3

The classic anti-pattern: tabIndex 1, 2, 3 sprinkled to force an order.

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

Authors use positive tabindex to force a tab order instead of fixing the DOM order, usually tabIndex 1 on the primary action. It works until anyone adds, removes, or reorders elements, and then the explicit sequence silently diverges from the visual layout. The rule is a flat ban: no positive integers, ever. tabIndex 0 (in natural order) and -1 (focusable programmatically only) cover every legitimate need. 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

• tabIndex={-1} is for programmatic focus (modals, error summaries), not for removing things from tab order permanently.
• Do not use tabIndex 0 to make a div focusable as a substitute for a button, that trips other rules.
• Third-party widgets with positive tabindex need a post-render cleanup or a vendor 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/pstMnXPpgtkHgDh4fawdKuZA

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

Thread query: eslint jsx-a11y tabindex-no-positive failed positive tabindex

TL;DR: Replace every positive tabindex with 0, -1, or a DOM reorder: positive values hijack the tab order into an explicit sequence that breaks the moment markup changes. One line of why: tab order should follow DOM order, and positive tabindex creates a fragile parallel order that assistive tech and keyboards experience differently.