no-noninteractive-element-interactions

Keywords: no-noninteractive-element-interactions, accessibility, ESLint rule, WCAG, a11y, React accessibility

Prevent event handlers on non-interactive elements. This rule is part of eslint-plugin-react-a11y and provides LLM-optimized error messages with fix suggestions.

Quick Summary

Rule Details

This rule helps ensure WCAG 2.1.1 compliance by enforcing: Prevent event handlers on non-interactive elements

Why This Matters

Examples

❌ Incorrect

// Violation of no-noninteractive-element-interactions
// See rule source for specific examples

✅ Correct

// Compliant with no-noninteractive-element-interactions
// See rule source for specific examples

Configuration

// eslint.config.js
{
  rules: {
    'react-a11y/no-noninteractive-element-interactions': 'error'
  }
}

WCAG 2.1 Compliance

This rule helps satisfy:

• 2.1.1 Keyboard: Prevent event handlers on non-interactive elements

Related Rules

• See RULES.md for all accessibility rules

Further Reading

• WCAG 2.1.1 - WCAG guidelines
• WebAIM - Accessibility resources
• MDN Accessibility - MDN documentation

Version

This rule is available in eslint-plugin-react-a11y v1.0.0+

Known False Negatives

The following patterns are not detected due to static analysis limitations:

Dynamic Variable References

Why: Static analysis cannot trace values stored in variables or passed through function parameters.

// ❌ NOT DETECTED - Prop from variable
const propValue = computedValue;
<Component prop={propValue} /> // Computation not analyzed

Mitigation: Implement runtime validation and review code manually. Consider using TypeScript branded types for validated inputs.

Wrapped or Aliased Functions

Why: Custom wrapper functions or aliased methods are not recognized by the rule.

// ❌ NOT DETECTED - Custom wrapper
function myWrapper(data) {
  return internalApi(data); // Wrapper not analyzed
}
myWrapper(unsafeInput);

Mitigation: Apply this rule's principles to wrapper function implementations. Avoid aliasing security-sensitive functions.

Imported Values

Why: When values come from imports, the rule cannot analyze their origin or construction.

// ❌ NOT DETECTED - Value from import
import { getValue } from './helpers';
processValue(getValue()); // Cross-file not tracked

Mitigation: Ensure imported values follow the same constraints. Use TypeScript for type safety.