Material UI Checkbox controlled by keyboard-CodePudding

we are developing a web application using react and material ui and we need to take care of accessibility which means our web application shall be used by persons with disabilities.

Therefore, the web application needs to by operable by keyboard.

It is necessary that one can tab through the forms and use enter to trigger some action. For inputs and buttons this works fine. However, for checkboxes there is a problem. I can focus on a checkbox using tab but I cannot check the checkbox using enter.

When I use onChange/onClick the checkbox gets checked only when I use the mouse:

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

When I use onChange/Onclick onKeyDown I can focus the checkbox with tab but when I use tab another time the checkbox gets checked even if I just want to go to the next input element.

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

Any hints are appreciated.

CodePudding user response：

I just found out that checkboxes are supposed to get checked by using space: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role

So, this is the desired behavior which is working with material ui.

CodePudding user response：

you must check which key is pressed and check for example if Enter Key is pressed then change the state of CheckBox

onKeyDown={(e) => {
          if (e.key === "Enter" )this.setState({ statementNecessary: !this.state.statementNecessary })}}