El rol HTML correcto y otros atributos relacionados para un elemento de fondo modal (TypeScript React).
Estoy intentando crear un componente Modal con React y TypeScript, que tenga una funcionalidad de “clic fuera para cerrar”; estoy intentando implementarlo haciendo un elemento de fondo: un elemento div HTML atenuado como fondo que tenga un evento onClick
que llame al método onClose
.
El problema es que cuando asigno un evento onClick
al elemento de fondo, obtengo el error de linting: Los elementos HTML estáticos con controladores de eventos requieren un rol.
Y cuando le doy un rol de un elemento interactivo, como button
, por ejemplo, obtengo estos otros errores:
– Se debe asociar un control con una etiqueta de texto.
– Los elementos con el rol interactivo 'button' deben ser focuseables.
Así que mi pregunta es, ¿cuál es el rol correcto para dar al elemento de fondo y cuáles deberían ser los otros atributos relacionados?
P.D. No estoy interesado en deshabilitar la regla de linting.
davy.ai
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 eventoonClick
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 en0
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:
En este ejemplo, los atributos
role
,aria-label
ytabIndex
se agregan al elementodiv
con el nombre de clasemodal-backdrop
, que se utiliza como el elemento de fondo. El eventoonClick
llama al métodoonClose
, que se pasará como una propiedad al componente de modal.