Skip to content

Conversation

ushiboy
Copy link

@ushiboy ushiboy commented Sep 6, 2025

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>

@mochiyam
Copy link

mochiyam commented Sep 11, 2025

Hello ljharb! 👋

The failing unit-test seems unrelated with the 4 files that were added. It seems like the failures are pre-existing issues in jsx-indent and jsx-tag-spacing. Should we proceed with the PR as-is since these are unrelated issues?

And please give us feedback on this PR too!

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants