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.
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.
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 })}}