Liri

Liri es la librería de componentes accesibles del sitio de Rol Sensorial. Se usa en páginas públicas, perfiles y paneles; los juegos usan Goi.

Los componentes consumen los tokens globales de Bootstrap y style.scss. No fijan una paleta propia: cambiar un token aprobado del sitio actualiza toda la librería.

Criterio para incorporar componentes

Todo componente de Liri debe ser genérico. Una página aporta textos, datos y callbacks mediante la API del componente; Liri no conoce rutas, identificadores ni reglas de negocio de esa página.

Antes de crear uno nuevo se intenta, en este orden:

1. resolver la interfaz con un componente nativo de Bootstrap;
2. reutilizar un componente de Liri;
3. parametrizar o ampliar uno existente conservando compatibilidad;
4. crear un componente nuevo sólo si existe un comportamiento compartido que Bootstrap no cubre.

Cada componente nuevo documenta su API y accesibilidad y prueba su contrato reutilizable.

Componentes

Confirmación destructiva

Liri.confirm() crea un diálogo nativo, lo nombra para lector de pantalla, mantiene el foco dentro, cierra con Escape, enfoca primero la opción negativa y devuelve el foco al control que lo abrió.

Liri.confirm({
  title: 'Eliminar elemento',
  message: 'Esta acción no se puede deshacer.',
  confirmLabel: 'Eliminar'
}).then(function (accepted) {
  if (accepted) eliminar();
});

Las cadenas se insertan con textContent. No se acepta HTML arbitrario.

Entrada de texto en un modal

Liri.prompt() solicita una nota breve y devuelve el texto o null al cancelar. Admite título, descripción, etiqueta, longitud máxima y textos de botones. Enfoca primero Cancelar y restaura el foco al cerrar.

Liri.prompt({
  title: 'Resolver reporte',
  message: 'Explica brevemente qué se corrigió.',
  label: 'Nota de resolución',
  confirmLabel: 'Marcar como resuelto'
}).then(function (note) {
  if (note !== null) resolver(note);
});

Próximos componentes

La revisión de web-games mostró patrones reutilizables, especialmente en PlayPalace11 y PlayAural:

• menú de opciones con foco estable, flechas, Inicio, Fin y búsqueda por letra;
• historial navegable que conserva la posición de lectura;
• diálogo de entrada con etiqueta, validación y retorno de foco;
• panel consultable de atajos;
• anunciador común para cambios de estado.

Se incorporarán a Liri cuando una segunda pantalla real los necesite. El código de juegos sirve como referencia de comportamiento, no se copia sin adaptar idioma, semántica y estilos del sitio.