eslint-plugin-styled-components-a11y weekly downloads statistics

Eslint Plugin Styled Components A11y 🤝

This plugin adds the ability to lint styled components according to the rules outlined in eslint-plugin-jsx-a11y.

It handles all 7 methods styled components uses to create components. All of these would show 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')``;
<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} />;

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

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

Elements can also be defined within objects:

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

<br /> <br /> <br />

<div style="display:flex; justify-content:center; align-items:center;">

Give the project a ⭐ STAR ⭐ and help increase accessibility for everyone!

<img align="left" src="https://iili.io/h1rLLN.png" alt="handshake-emoji" style="margin-right:30px;"/> <img align="right" src="https://iili.io/h1rLLN.png" alt="handshake-emoji" style="margin-left:30px;"/> </div> <br /> <br /> <br /> <!-- should figure out how to actually style this section. this is a temp fix --> <br /> <br /> <br />

Installation

Install as a dev dependency:

yarn add -D eslint-plugin-styled-components-a11y

or

npm i --save-dev eslint-plugin-styled-components-a11y

Configuration - Legacy Config (.eslintrc)

Add styled-components-a11y to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["styled-components-a11y"]
}

Enable the recommeded ruleset or the strict ruleset. Add plugin:styled-components-a11y/recommended or plugin:styled-components-a11y/strict in extends:

{
  "extends": ["plugin:styled-components-a11y/recommended"]
}

Alternatively, you can configure individual rules under the rules section.

{
  "rules": {
    "styled-components-a11y/rule-name": 2
  }
}

Configuration - Flat Config

The default export is a plugin object:

import styledA11y from 'eslint-plugin-styled-components-a11y';

export default [
  {
    plugins: {
      'styled-components-a11y': styledA11y,
    },
    rules: {
      'styled-components-a11y/rule-name': 2,
    },
  },
];

Shareable Configs

There are two shareable configs provided by the plugin:

• flatConfigs.recommended
• flatConfigs.strict

import styledA11y from 'eslint-plugin-styled-components-a11y';

export default [
  styledA11y.flatConfigs.recommended,
  // ... additional configs
];

Examples

a working repo can be found here at brendanmorrell/styled-components-a11y-example which has a file illustrating the linting rules in action for the above four styled component types the library is currently capable of handling

Please ⭐ STAR ⭐, share, report bugs, and contribute!!!

With your help, we can increase web accessibility for all!

If you like the project and believe in the goal, it would bea HUGE help if you could give it a star on github and/or spread the word on social/with coworkers so we could get more people using it, testing it, and contributing (any bump would help, as this is solely a pet project of mine, and I have limited time to work on it).

Really.

Most modern sites are almost entirely unnavigable for those with special needs. Linters are the primary method of informing developers and enforcing solutions, but with most now using CSS in JS, existing a11y linting has become significantly less useful (personally, 99% of the components I actually need linted are styled); using and promoting solutions to this problem would be a massive step toward increasing accessibillity on the web. If you can, please help give us a boost so I can keep working on this, get others to assist, and work toward a more open, accessible internet for everyone.

Also, PLEASE let me know of any bugs you find so I can more quickly rectify them (or even better, make a PR).

Note

1. version 0.0.15 had two major bug fixes, if you have a previous version, please update.
2. As evidence of the importance of styled a11y linting, I ran just this plugin on a prod repo i'm working on, and it uncovered 6,567 errors that were undiscovered using airbnb/jsx-a11y linting rules. once again, please share, star the github repo, report any bugs, and contribute so we can increase web accessibility for all!

Contributing

Contributions are very welcome, as I don't have a lot of free time to work on this currently. My personal todo list is in Todo.md. I will try to make this more intelligible to other contributors, but if you'd like to start before I get around to that, let me know, and I can tell you what still needs work. Thanks!

Note: Someone asked how to contribute. I'll drop the response here in case it's useful (can clean it up/add more later depending on interest)…