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

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.

[garetmckinley]

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

[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.