Rule Idea: Enforce boolean literals for "booleanish" HTML attributes such as aria-hidden

[jdufresne]

The following forms are both correct and equivalent:

<i className="fa fa-camera-retro fa-lg" aria-hidden="true" />

<i className="fa fa-camera-retro fa-lg" aria-hidden={true} />
// OR
<i className="fa fa-camera-retro fa-lg" aria-hidden />

This proposal is that a rule would prefer the 2nd form. That is, use the more specific literal type for these attributes. This would only apply when using a literal. There are several aria-* that are booleanish. This rule could apply to all of them.

The benefit is a more consistent codebase that avoids flip-flopping on style. As well, using a boolean in a true/false context feels more natural and explicit in intent.

The types defined by @types/react at:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/5b5ec4e409bcd8d422efc505db5b0223c0c5af56/types/react/index.d.ts#L2591-L2812

[ljharb]

Things that deal with aria belong in eslint-plugin-jsx-a11y (and aren't react-specific), so I'll transfer this issue there.

[ljharb]

However, I wonder if there's existing rules already that enforce the style of boolean jsx properties - have you tried https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md ?

[jdufresne]

Thanks for the link and moving the ticket.

The docs on that rule read:

When using a boolean attribute in JSX, you can set the attribute value to true or omit the value.

However, this proposal is about when an attribute is the literal string "true" which of course is not a boolean. So my understanding is the rule doesn't apply to the proposal.

[ljharb]

aha, good point - in that case, we'd want an aria-specific rule in this project to force true over "true", at which point the other rule can kick in :-)