由键盘控制的 Material UI 复选框

Question

我们正在使用 React 和 Material UI 开发一个 Web 应用程序，我们需要考虑可访问性，这意味着我们的 Web 应用程序应由残疾人使用。

因此，Web应用程序需要可通过键盘操作。

必须能够通过 Tab 键浏览表单并使用 Enter 来触发某些操作。对于输入和按钮，这工作得很好。然而，对于复选框来说存在一个问题。我可以使用选项卡关注复选框，但无法使用 Enter 选中复选框。

当我使用 onChange/onClick 时，仅当我使用鼠标时才会选中复选框：

<Checkbox
     checked={this.state.statementNecessary}
     onChange={() => {
              this.setState({ statementNecessary: !this.state.statementNecessary })}} />

当我使用 onChange/Onclick + onKeyDown 时，我可以使用选项卡聚焦复选框，但是当我再次使用选项卡时，即使我只想转到下一个输入元素，复选框也会被选中。

<Checkbox
     checked={this.state.statementNecessary}
     onKeyDown={() => {
              this.setState({ statementNecessary: !this.state.statementNecessary })}}
     onChange={() => {
              this.setState({ statementNecessary: !this.state.statementNecessary })}} />     

任何提示表示赞赏。

Answer 1

我刚刚发现应该使用空格来检查复选框： https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role

所以，这是与 Material ui 一起使用的期望行为。