Using eslint-plugin-jsx-a11y with styled-components

[fkereki]

If you use Styled-Components, eslint-plugin-jsx-a11y cannot detect tags and apply rules, so it's rendered practically useless.

const Styled_Div = styled.div`...`;
const Nice_Button = styled.button`...`;

render() {
    return <Styled_Div... />...<Nice_Button...> ... </Nice_Button>...</Styled_Div>;
}

I have two suggestions:

• add some definitions for equivalences in the configuration file:

equivalences = {
    'Styled_Div' : 'div',
    'Nice_Button' : 'button'
}

• alternatively, if the name of an tag ends with underscore and a HTML tag (as in my examples) just assume the tag: Styled_Div would be processed as a div, and Nice_Button as a button.

[ljharb]

I think that "rendered practically useless" is true of just about any static analysis tool for JS, when using a template tag DSL like styled-components.

Regardless, I can see the benefit (even for idiomatic jsx users) of specifying a settings-level map - from 'div' to ['Styled_Div', 'OtherDiv'] etc - that all rules used.

This wouldn't be a trivial amount of work - and would require lots of tests, for every single rule - but I think it'd be useful.

[fkereki]

Wouldn't my second suggestion be simpler to implement? Best regards, FK

…

On Sat, Jul 14, 2018 at 7:38 PM Jordan Harband ***@***.***> wrote: I think that "rendered practically useless" is true of just about any static analysis tool for JS, when using a template tag DSL like styled-components. Regardless, I can see the benefit (even for idiomatic jsx users) of specifying a settings-level map - from 'div' to ['Styled_Div', 'OtherDiv'] etc - that all rules used. This wouldn't be a trivial amount of work - and would require lots of tests, for every single rule - but I think it'd be useful. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/466#issuecomment-405054359>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACWo31wnKokc2cLZrSuJqAyNLA9iEyPLks5uGnLdgaJpZM4VP9PO> .

[ljharb]

It would be much more magical and implicit, which are synonyms for "worse" imo.

[fkereki]

I can understand that - however, as an interim measure, it could do: "better a bird in the hand, than two in the bush"? Thanks for your answers!

[jcperez-ch]

Totally agree with @ljharb that setting up an explicit mapper would be a better idea. In my project we don't use underscores or any kind of inferred tagging, I believe that is up to the developer to construct, however, if we need a universal solution, a mapper (first solution) is the way to go. Question, is this something in progress? I feel like a lint cheater having the need to disable the rule for every Styled component with annotations.

[AriTheElk]

Any update on this? Most of my projects use styled-components pretty heavily and it's a serious bummer missing out on getting a11y hints

[eps1lon]

Looks like #174 could've solved this issue.

[brendanmorrell]

Hey, I made a pretty cool plugin for this (hopefully). It found 6,567 errors in one of my repos that were undiscovered using airbnb/jsx-a11y rules. Please give it a star so we can get more people interested, using it, and contributing to make a more accessible internet for all.

Here’s the github repo it covers all 4 styled components/emotion syntaxes

Existing a11y linting has become significantly less useful (personally, 99% of the components I need linted are styled.). Each scenario below would display the error

Visible, non-interactive elements with click handlers must have at least one keyboard listener.`

const Div = styled.div``;
<Div onClick={() => null}/>

const Div = styled.div.attrs({ onClick: () => null})``;
<Div />

const Div = styled.div.attrs({ onClick: () => null})``;
const StyledDiv = styled(Div)``;
<StyledDiv />

const ButtonAsDiv = styled.button``;
<ButtonAsDiv as="div" onClick={() => null} />

It’s not perfect (no linters are), but it’s super useful, and with a little time and community support, it could be even better.