es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Controlador de eventos de pulsación para cumplimiento de accesibilidad a11y

06 Aug, 2023 Programación

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?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema radica en cómo estás llamando a handleKeyPress dentro del evento onKeyDown. 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ón handleViewInfoClick como argumento de esta manera:

    onKeyDown={(e) => {
  console.log('se detectó una pulsación de tecla');
  handleKeyPress(() => {
   console.log('dentro del controlador');
   handleViewInfoClick(e);
  })(e);
}}

    De esta manera, se pasará correctamente el evento como argumento a la función handleViewInfoClick dentro del envoltorio handleKeyPress.

Comments are closed.