eslint-plugin-react icon indicating copy to clipboard operation
eslint-plugin-react copied to clipboard

[New]: `jsx-no-literals`: add restrictedAttributes option

Open ushiboy opened this issue 3 months ago • 1 comments

Add restrictedAttributes option to jsx-no-literals rule

Summary

This PR introduces a new restrictedAttributes option for the jsx-no-literals rule. With this option, you can enforce translation (i18n) only for certain attributes, while other attributes can still use string literals freely.

Note: If noAttributeStrings: true is also set, the root-level restrictedAttributes will be ignored.

This implementation addresses the main requirements discussed in issue #3003, though it takes a slightly different approach from some of the ideas mentioned there.

Usage Examples

Basic usage – restrict specific attributes globally

{
  "react/jsx-no-literals": [
    "error", 
    { 
      "restrictedAttributes": ["title", "alt", "aria-label", "placeholder"] 
    }
  ]
}
// ❌ Error: Restricted attribute string: "Click me" in title
<button title="Click me">Save</button>

// ✅ OK: className is not in restrictedAttributes
<button className="primary">Save</button>

Component-specific restrictions

{
  "react/jsx-no-literals": [
    "error",
    {
      "elementOverrides": {
        "Input": { "restrictedAttributes": ["placeholder", "aria-label"] },
        "Button": { "restrictedAttributes": ["title", "aria-label"] }
      }
    }
  ]
}
// ❌ Error: Restricted attribute string: "Enter name" in placeholder of Input
<Input placeholder="Enter name" />

// ✅ OK: type is not restricted for Button component
<Button type="submit">Submit</Button>

ushiboy avatar Sep 06 '25 13:09 ushiboy