search

jsx-eslint / eslint-plugin-jsx-a11y

Static AST checker for a11y rules on JSX elements.
MIT License
3.39k stars 636 forks source link

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

Open jdufresne opened 5 months ago

jdufresne commented 5 months ago

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 commented 5 months ago

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

ljharb commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 :-)