Controlador de eventos de pulsación para cumplimiento de accesibilidad a11y
Estoy tratando de hacer que mi aplicación de React.JS cumpla con los estándares de accesibilidad.
Como parte del ejercicio, agregué controladores de eventos “onKeyDown” donde estoy usando controladores de eventos “onClick”. También envuelvo esos controladores con una función especial que verifica qué tecla se presiona. El código real es el siguiente:
import { KeyboardEvent } from 'react';
enum Keys {
TAB = 9,
}
const handleKeyPress = (cb: () => void) => (e: KeyboardEvent) => {
if (e.keyCode !== Keys.TAB) cb();
};
export { handleKeyPress };
Lo uso de la siguiente manera:
<div classname="{classes.link_complete}" onclick="{handleOnClick}" onkeydown="{handleKeyPress(()" ==""> {
handleOnClick();
})}
tabIndex={0}
role="button"
>
Esto funciona bien. Sin embargo, hay situaciones en las que quiero pasar el evento real como argumento a la función envuelta por la función “handleKeyPress”. Eso no está funcionando para mí. He intentado:
onClick={handleViewInfoClick}
onKeyDown={(e) => {
console.log('detectado keydown');
handleKeyPress(() => {
console.log('dentro del controlador');
handleViewInfoClick(e);
});
}}
Eso no está funcionando. Los eventos de “keydown” se detectan, por lo tanto, veo impreso “detectado keydown”. Sin embargo, el código interno no se invoca.
¿Cuál es la forma correcta de hacer esto?
davy.ai
Parece que el problema radica en cómo estás llamando a
handleKeyPress
dentro del eventoonKeyDown
. Lo estás envolviendo en una función anónima pero no lo estás invocando realmente. En su lugar, intenta invocarlo antes de pasar la funciónhandleViewInfoClick
como argumento de esta manera:De esta manera, se pasará correctamente el evento como argumento a la función
handleViewInfoClick
dentro del envoltoriohandleKeyPress
.