aria-proptypes rule incorrectly fails when converting Boolean variable to string

[kburk1997]

Hello,

I am using eslint-plugin-jsx-a11y in a custom component library. One of our custom components sets aria-expanded based on a boolean variable:

@State() private _booleanVar: boolean;

renderComponent(): JSX.Element {
    return (
        <button aria-expanded={`${_booleanVar}`}>Test</button>
    );
}

jsx-a11y/aria-proptypes flags this as an error even though I'm converting a boolean to a string - is this a bug? Or is converting a boolean to string for aria-expanded no longer recommended?

[ljharb]

The issue is that we can't easily statically tell that that's a stringified boolean, If you do _booleanVar ? 'true' : 'false' then I expect it would work?

[michaelfaith]

If the rule had access to the type information of _booleanVar, I feel like that wouldn't be too hard. I.e. Does the TemplateLiteral only have one express, and that expression is an Identifier who's type annotation is TSBooleanKeyword. With that said, that flow would require the typescript-eslint parser and that the code is in typescript.

[ljharb]

Exactly - it's fine if there's improved behavior when type information is provided by the parser, as long as there's still some functionality for non-TS users.