required-attributes

Type-unaware

Keywords: React, accessibility, ESLint rule, required attributes, aria attributes, React props, auto-fix, LLM-optimized, React accessibility

Enforce required attributes on React components with customizable ignore lists. This rule is part of eslint-plugin-react-features and provides LLM-optimized error messages with fix suggestions.

💡 Provides suggestions | 🔧 Automatically fixable

Quick Summary

Aspect	Details
Severity	Warning (accessibility best practice)
Auto-Fix	✅ Yes (adds missing attributes)
Category	React / Accessibility
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	React/Next.js applications, accessibility-focused projects

Rule Details

Ensures React components have required attributes (e.g., accessibility attributes, data attributes).

Configuration

Option	Type	Default	Description
`attributes`	`AttributeRule[]`	`[]`	List of required attributes
`ignoreComponents`	`string[]`	`[]`	Components to ignore globally

AttributeRule Object

Property	Type	Required	Description
`attribute`	`string`	Yes	Required attribute name
`ignoreTags`	`string[]`	No	Tags to ignore for this attribute
`message`	`string`	No	Custom error message
`suggestedValue`	`string`	No	Suggested value for auto-fix

Examples

❌ Incorrect

Awaiting a tested example. The previous snippet was removed because the rule does not behave as the doc claimed; track the regression in benchmarks/FP_FN_REMEDIATION_TRACKER.md.

✅ Correct

// With required attributes
<button onClick={handleClick} aria-label="Submit form">
  Click me
</button>

<img src="/photo.jpg" alt="Profile photo" />

Configuration Examples

Accessibility Enforcement

{
  rules: {
    'react-features/required-attributes': ['error', {
      attributes: [
        {
          attribute: 'alt',
          ignoreTags: ['div', 'span'],
          message: 'Images must have alt text for accessibility',
          suggestedValue: ''
        },
        {
          attribute: 'aria-label',
          ignoreTags: ['div', 'p'],
          message: 'Interactive elements need aria-label'
        }
      ],
      ignoreComponents: ['Icon', 'Logo']
    }]
  }
}

Data Tracking Attributes

{
  rules: {
    'react-features/required-attributes': ['warn', {
      attributes: [
        {
          attribute: 'data-testid',
          message: 'Add data-testid for E2E testing',
          suggestedValue: 'element-name'
        },
        {
          attribute: 'data-analytics',
          ignoreTags: ['div', 'span'],
          message: 'Trackable elements need data-analytics'
        }
      ]
    }]
  }
}

Why This Matters

Issue	Impact	Solution
♿ Accessibility	Screen readers can't interpret	Enforce ARIA attributes
🧪 Testing	Hard to select elements in tests	Require data-testid
📊 Analytics	Missing tracking data	Enforce data attributes
🎨 Consistency	Inconsistent attribute usage	Standardize requirements

Comparison with Alternatives

Feature	required-attributes	eslint-plugin-jsx-a11y	eslint-plugin-react
Custom Attributes	✅ Yes	❌ No	❌ No
Auto-Fix	✅ Yes	⚠️ Limited	❌ No
LLM-Optimized	✅ Yes	❌ No	❌ No
ESLint MCP	✅ Optimized	❌ No	❌ No
Configurable Rules	✅ Yes	⚠️ Limited	⚠️ Limited

img-requires-alt (planned) - Specific img alt enforcement
react-no-inline-functions - React performance optimization
react-class-to-hooks - React modernization

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.

Cross-Module Data Flow

Why: ESLint rules analyze one file at a time. Values imported from other modules cannot be traced.

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

Mitigation: Apply the same rule to imported modules. Use module boundaries and explicit exports.