estamos desarrollando una aplicación web utilizando react y material ui y debemos cuidar la accesibilidad, lo que significa que nuestra aplicación web será utilizada por personas con discapacidades.
Por lo tanto, la aplicación web debe poder operarse con el teclado.
Es necesario que uno pueda tabular a través de los formularios y usar enter para activar alguna acción. Para entradas y botones esto funciona bien. Sin embargo, para las casillas de verificación hay un problema. Puedo enfocarme en una casilla de verificación usando la pestaña pero no puedo marcar la casilla de verificación usando enter.
Cuando uso onChange/onClick, la casilla de verificación se marca solo cuando uso el mouse:
<Checkbox checked={this.state.statementNecessary} onChange={() => { this.setState({ statementNecessary: !this.state.statementNecessary })}} />Cuando uso onChange/Onclick + onKeyDown, puedo enfocar la casilla de verificación con la pestaña, pero cuando uso la pestaña otra vez, la casilla de verificación se marca incluso si solo quiero ir al siguiente elemento de entrada.
<Checkbox checked={this.state.statementNecessary} onKeyDown={() => { this.setState({ statementNecessary: !this.state.statementNecessary })}} onChange={() => { this.setState({ statementNecessary: !this.state.statementNecessary })}} />Cualquier sugerencia es apreciada.
Acabo de enterarme de que se supone que las casillas de verificación se marcan usando el espacio: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role
Entonces, este es el comportamiento deseado que funciona con el material ui.
debe verificar qué tecla se presiona y verificar, por ejemplo, si se presiona la tecla Intro y luego cambiar el estado de CheckBox
onKeyDown={(e) => { if (e.key === "Enter" )this.setState({ statementNecessary: !this.state.statementNecessary })}}