Accesibilidad en React: focus management

Técnicas para controlar foco en React al montar, desmontar y actualizar interfaces dinámicas.

📘 Teoría

Principios de focus management en componentes React.

Cuando aparece un contexto nuevo, coloca foco en el primer control relevante.

Al cerrar, devuelve foco al disparador para mantener continuidad.

Si filtras o reordenas, evita perder foco en elementos eliminados.

Tras navegar de vista, posiciona foco en heading principal o landmark main.

Evita recrear referencias innecesarias que rompan control de foco.

Depender solo de autofocus y no manejar focos post-render.

Cómo normalizar focus management en una base React grande.

Define utilidades compartidas para modales, drawers y menús contextuales.

Integra tests de teclado en componentes de design system.

Alinea rutas, títulos y foco para no dejar al usuario en contexto ambiguo.

Hook mínimo para enfocar control de cierre al abrir un modal.

useEffect + ref

const closeRef = useRef(null);

useEffect(() => {
  if (open) closeRef.current?.focus();
}, [open]);

Ejemplo Demo guiada Abre y cierra un modal React con foco de entrada y retorno.

⌄

Reto Reto práctico Añade retorno de foco al botón que abre un panel.

⌄

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Recursos del curso 25