Desde finales de septiembre trabajo en Teselia, un proyecto paralelo de código abierto. Teselia reúne componentes de formulario accesibles: piezas pequeñas, cada una con un solo trabajo, que puedes usar en cualquier web.
El proyecto
Cada componente resuelve un campo de formulario que suele dar problemas, como el teléfono con prefijo internacional o el código de verificación. Escribo los componentes con Vue 3 y los publico como Web Components. Puedes usarlos en una página HTML sin framework, en React, en Vue o dentro de WordPress.
Los componentes trabajan con el <form> nativo igual que un <input>: el navegador los valida, los restablece y los autocompleta sin código extra.
El nombre viene de tessera, la pieza con la que los romanos hacían mosaicos. En Roma, una tessera también servía de ficha para entrar en un lugar. Me gustaron las dos ideas: piezas pequeñas que forman un conjunto, y acceso para cualquiera.
Lo que ya está publicado
- @teselia/phone es un campo de teléfono internacional. Eliges el país escribiendo su nombre, su código o su prefijo, y tu servidor recibe el número en formato internacional (
+34612345678). Publiqué la versión 1.0 el 27 de septiembre. - @teselia/otp es un campo para códigos de verificación. Ves seis casillas, pero por dentro hay un único campo de texto: puedes pegar el código o dejar que el móvil lo rellene, y el lector de pantalla lo lee como un solo campo. Publiqué la versión 1.0 el 7 de octubre.
Ahora trabajo en el tercero, un campo de contraseña.
Mi forma de trabajar
Antes de escribir código, redacto un documento de diseño para cada componente. Ahí apunto cada decisión, las alternativas que descarté y el motivo. Si cambio de idea durante el desarrollo, actualizo el documento en el mismo pull request. Los tienes todos en la carpeta design/ del repositorio.
Quiero que cumplan WCAG 2.2 AA sin configurar nada. Cada componente pasa tests automáticos en Chromium, Firefox y WebKit, y axe-core revisa cada estado: abierto, cerrado, con error o deshabilitado. Después lo pruebo a mano con teclado, con el lector de pantalla NVDA, en modo de alto contraste y con el navegador ampliado al 400 %. Todavía no lo he probado con VoiceOver, y la documentación lo indica.
Claude Code escribe gran parte del código
Uso Claude Code, el asistente de programación de Anthropic, para generar la mayor parte del código de Teselia. Puedes comprobarlo en GitHub: casi todos los commits lo llevan como coautor.
Yo decido qué construimos y cómo, reviso los documentos de diseño y fijo las reglas del proyecto, como no copiar código de otras librerías o pasar los tests en los tres navegadores antes de fusionar un cambio. También hago las pruebas que una IA no puede hacer: recorrer un componente con un lector de pantalla o comprobar en mi iPhone que el teclado ofrece el código que acaba de llegar.
Prefiero que lo leas aquí antes que en el historial de commits.
Enlaces
- Documentación y demos: teselia.caicesardev.com
- Código: github.com/caicesardev/teselia
- Paquetes en npm: @teselia/phone y @teselia/otp
Teselia es código abierto con licencia MIT. Si encuentras un fallo, sobre todo de accesibilidad, abre un issue en GitHub o escríbeme.
