TypeScript: Accessibility

Foundation incluye primitivas DOM pequeñas para patrones repetidos de accesibilidad. No reemplazan una librería completa de componentes accesibles.

Focus management

import {
  getFocusableElements,
  restoreFocus,
  trapTabKey,
} from '@micazoyolli/foundation';

Qué hace

• getFocusableElements(container) obtiene elementos enfocables visibles para teclado.
• trapTabKey(event, container) mantiene Tab dentro de un panel.
• restoreFocus(element) devuelve el foco al disparador si sigue en el documento.

Panel accesible

Tab circula dentro del panel y Escape puede cerrar.

Scroll lock

import { lockBodyScroll, unlockBodyScroll } from '@micazoyolli/foundation';

const lock = lockBodyScroll();
unlockBodyScroll(lock);

Cuándo usarlo

• Drawers y modales simples.
• Overlays que deben evitar scroll del fondo.

Cuándo no usarlo

• Locks anidados complejos.
• Componentes que ya tienen un manager accesible robusto.

Escape

import { createEscapeKeyHandler } from '@micazoyolli/foundation';

const onEscape = createEscapeKeyHandler(close);
document.addEventListener('keydown', onEscape);

Media protegida

import { isProtectedMediaTarget } from '@micazoyolli/foundation';

document.addEventListener('contextmenu', (event) => {
  if (isProtectedMediaTarget(event.target)) event.preventDefault();
});

IMG

Protege elementos concretos sin bloquear selección, teclado o lectura global.

Accesibilidad

Estas utilidades deben acompañarse con HTML semántico, labels, aria-* cuando aplique y focus visible definido por el proyecto.

Focus visible

Foundation no exporta estilos globales de focus. El proyecto consumidor debe mantener un indicador visible, consistente y con contraste suficiente.

Enfócame con Tab

Resultado visual de media protegida

IMG

La protección se limita a media concreta. No bloquea selección global, teclado ni lectura.

Archivo/export relacionado: src/a11y/focus.ts