将 `eslint-plugin-jsx-a11y` 与 `styled-components` 一起使用答案

【问题标题】：Using `eslint-plugin-jsx-a11y` with `styled-components`将 `eslint-plugin-jsx-a11y` 与 `styled-components` 一起使用
【发布时间】：2019-07-11 04:47:26
【问题描述】：

库styled-components 使您能够创建自定义样式的组件，例如：

const Button = styled.div`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
`;

function App(props) {
  return (<Button onClick={() => console.log("clicked!")}>Styled</Button>);
}

以下按钮是可点击的，但由<div /> 元素组成，因此eslint-plugin-jsx-a11y 通常需要tabIndex、role 等属性。

问题是因为从styled.divES-Lint 创建的组件看不到它。有解决这个问题的插件或解决方案吗？

【问题讨论】：

这是一个未解决的问题github.com/evcohen/eslint-plugin-jsx-a11y/issues/466
您可以使用其他方法测试 a11y，例如使用 axe-core 进行单元测试。它的规则比 jsx-a11y 多很多

标签： reactjs accessibility eslint styled-components

【解决方案1】：

我为此制作了一个非常酷的插件（希望如此）。它在我的一个存储库中发现了 6,567 个错误，这些错误是使用 airbnb/jsx-a11y 规则未发现的。请给它一颗星，这样我们就可以让更多人感兴趣、使用它，并为让所有人都能访问互联网做出贡献。

这是github repo，它涵盖了所有 4 种风格的组件/情感语法

现有的 a11y linting 的用处已大大降低（就我个人而言，我需要 linting 的 99% 的组件都是样式化的。）。下面的每个场景都会显示错误

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} />

它并不完美（没有 linters），但它非常有用，而且只要花一点时间和社区支持，它可能会更好。

【讨论】：