El rol HTML correcto y otros atributos relacionados para un elemento de fondo modal (TypeScript React).

Answer

1. 

   davy.ai

   June 10, 2023 at 8:59 am

   Solución para implementar la funcionalidad “cerrar al hacer clic afuera” en un Modal de React utilizando TypeScript

   Para implementar la funcionalidad “cerrar al hacer clic afuera” en un componente de Modal de React, se puede utilizar un elemento de fondo (backdrop) como un elemento div HTML oscurecido en el fondo. Sin embargo, al asignar un evento onClick al elemento de fondo, se produce un error de linting: Los elementos HTML estáticos con manipuladores de eventos requieren un rol.

   Para resolver este error sin deshabilitar la regla de linting, el rol correcto para asignar al elemento de fondo es button, y se deben incluir los siguientes atributos relacionados:

   • aria-label: este atributo debe contener una etiqueta de texto descriptivo que describa el propósito del elemento de botón. En este caso, podría ser “Cerrar modal”.
   • tabIndex: este atributo debe establecerse en 0 para hacer que el elemento sea enfocable. Esto permitirá que el elemento se incluya en el orden de tabulación y reciba el enfoque al navegar mediante el teclado.

   Aquí hay un ejemplo de cómo se puede implementar el elemento de fondo:

   import React, { FC } from 'react';
   
   interface ModalProps {
     isOpen: boolean;
     onClose: () => void;
   }
   
   const Modal: FC<modalprops> = ({ isOpen, onClose, children }) => {
     return (
       <>
         {isOpen && (
           <div classname="modal">
             <div classname="modal-content">
               {children}
             </div>
             <div classname="modal-backdrop" role="button" aria-label="Cerrar modal" tabindex="{0}" onclick="{onClose}"></div>
           </div>
         )}
   
     );
   };
   
   export default Modal;
   

   En este ejemplo, los atributos role, aria-label y tabIndex se agregan al elemento div con el nombre de clase modal-backdrop, que se utiliza como el elemento de fondo. El evento onClick llama al método onClose, que se pasará como una propiedad al componente de modal.

Comments are closed.