Un campo de teléfono parece lo más sencillo de un formulario hasta que tiene que aceptar números de otros países. Entonces necesitas un selector de prefijo, y los que encuentras por ahí suelen ser listas de banderas que no puedes recorrer con teclado ni con un lector de pantalla.
Repaso las decisiones que tomé al construir @teselia/phone, el primer componente de Teselia, y el motivo de cada una.
Un solo valor para el servidor
El formulario envía el número en formato E.164: +34612345678, sin espacios y con el prefijo incluido. No envío el país aparte porque ya va dentro del número.
Tú puedes escribirlo a tu manera: 612 34 56 78, 612-34-56-78 o con 0034 delante. El componente lo interpreta. Si dejara esa tarea al servidor, cada backend acabaría con sus propias reglas.
Elegir el país escribiendo
El selector de país es un combobox editable: escribes y la lista se filtra. Sigue el patrón de la guía de prácticas de autoría de WAI-ARIA, el que esperan los lectores de pantalla.
Puedes buscar por nombre sin preocuparte de las tildes (espana encuentra España), por código ISO (gb) o por prefijo: con 3 quedan los países del +30 al +39, y con 34, España.
Con las flechas recorres la lista, Enter elige y Escape cierra sin cambiar nada. El navegador aporta los nombres de los países con Intl.DisplayNames, en el idioma de la página, así que el componente no carga ningún archivo de traducciones.
Puedes marcar países sugeridos para que aparezcan arriba, en un grupo propio. No los repito en la lista completa: si España aparece dos veces, el lector de pantalla cuenta una opción de más y la posición que anuncia deja de cuadrar.
Sin banderas
Quizá echas de menos las banderas. Una bandera no aporta nada a quien no ve la pantalla, porque el nombre del país y el prefijo ya lo identifican. Además, Windows no muestra las banderas en emoji: en su lugar ves dos letras, «ES». Y dibujar unas 240 banderas propias habría retrasado la primera versión.
El selector muestra España +34. El prefijo no basta por sí solo: el +1 lo comparten Estados Unidos, Canadá y otros países, y el +44 el Reino Unido, Jersey, Guernsey y la isla de Man. El código ISO tampoco funciona, porque los lectores de pantalla lo pronuncian como una palabra y leen «IT» como el pronombre inglés «it».
Pegar un número completo
Si pegas +44 20 7946 0958, el componente detecta el prefijo, cambia el país a Reino Unido, deja en el campo la parte nacional y avisa del cambio al lector de pantalla. El autocompletado del navegador sigue el mismo camino.
Ese aviso me dio un problema que encontré probando a mano. Si pegaba dos veces seguidas un número del mismo país, el segundo aviso no llegaba a NVDA en Brave. Chromium agrupa los cambios de accesibilidad por fotograma, y si el componente vaciaba y rellenaba el mensaje en el mismo instante, Chromium no veía ningún cambio. Lo arreglé esperando 100 milisegundos entre vaciarlo y escribirlo.
Errores en el momento justo
Si un campo se pone rojo cuando acabas de empezar a escribir, te riñe por algo que todavía no has terminado. Por eso el componente no muestra errores mientras escribes. Los muestra al salir del campo, si has escrito algo, o al enviar el formulario. A partir de ahí, el mensaje se actualiza contigo y desaparece cuando el número es válido. El borde también pasa de 1 a 2 píxeles, para que no dependas del color para ver el error.
Limitaciones conocidas
- Un
<label for>externo no llega al campo interno, porque el Shadow DOM no deja cruzar esas referencias. Usa el atributolabeldel componente. - Para que pese poco, valido con los metadatos reducidos de
libphonenumber-js. Detectan prefijos imposibles y longitudes absurdas, pero aceptan, por ejemplo, un móvil alemán al que le falta un dígito.
Tampoco lo he probado todavía con VoiceOver.
El documento de diseño recoge todas estas decisiones con las alternativas que descarté, y la documentación tiene una demo para probarlo.
