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

Question

图书馆 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.div 创建的组件ES-Lint 看不到它。有没有插件或解决方案可以解决这个问题？

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

它并不完美(没有 linter)，但它非常有用，并且如果有一点时间和社区支持，它可能会更好。