Portals, trampa de foco y cierre con Escape
Renderice modales mediante portals, atrape el foco para usuarios de teclado y cierre con Escape o al pulsar el backdrop para establecer una base sólida de accesibilidad.
Portals, trampa de foco y cierre con Escape es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 3 lecciones en total.
Por qué usar portales y trampas de foco
Objetivo: Crear modales que funcionen para todo el mundo.
- Portal al body
- La trampa de foco mantiene el foco dentro
- Escape/fondo para cerrar
Fundamentos de accesibilidad
- Usar role="dialog" + aria-modal="true"
- Colocar el foco en el primer elemento interactivo al abrir
- Devolver el foco al control que activó el modal al cerrarlo
Demostración: modal con portal (abrir/cerrar)
Renderizar el diálogo mediante un portal para que aparezca por encima de todo lo demás.
<div id="root"></div>Demostración: fundamentos de la trampa de foco
Enfocar automáticamente el primer botón y atrapar el tabulador dentro del diálogo.
<div id="root"></div>Demostración: patrones de cierre + restauración del foco
Cerrar con Escape o con el fondo y devolver el foco al botón que activó el modal.
<div id="root"></div>Consejos y lista de comprobación
- Añadir role="dialog" y aria-modal="true"
- Enfocar el primer control al abrir y devolver el foco al activador al cerrar
- Gestionar Escape y el clic en el fondo
Comprobación de accesibilidad de los modales
Resumen
Resumen: Renderizar los modales mediante un portal, mantener el foco dentro y permitir que los usuarios los cierren con Escape o haciendo clic en el fondo, devolviendo después el foco al elemento que los abrió.
Preguntas frecuentes
¿La lección «Portals, trampa de foco y cierre con Escape» es gratis?
Sí — el texto completo de «Portals, trampa de foco y cierre con Escape» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Portals, trampa de foco y cierre con Escape»?
Renderice modales mediante portals, atrape el foco para usuarios de teclado y cierre con Escape o al pulsar el backdrop para establecer una base sólida de accesibilidad. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.
¿Cuánto tiempo toma la lección «Portals, trampa de foco y cierre con Escape»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Portals, trampa de foco y cierre con Escape
- Gestor global de overlays (Context + Reducer)
- Avisos de accesibilidad (aria-live)