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

我为此做了一个非常酷的插件（希望如此）。它在我的一个存储库中发现了6567个错误，这些错误是使用airbnb / jsx-a11y规则未发现的。请给它加星号，以便我们吸引更多的人使用它，并为所有人提供更易于访问的互联网做出贡献。

这里是github repo，涵盖了所有4种样式化的组件/情感语法

现有的所有绒毛的用途已大大减少（个人而言，我需要绒毛的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} />

这并不完美（没有羽绒服），但是它非常有用，并且只需一点时间和社区支持，它甚至会更好。

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

1 个答案: