Mention & @ patterns

Cuando el usuario escribe @ dentro del editor, abre el popup de inmediato, no esperes una segunda tecla ni un retardo. Cablea el combobox con aria-controls hacia la listbox y aria-activedescendant siguiendo la opción resaltada, para comunicar la posición a la tecnología asistiva sin mover el foco del DOM. Filtra los resultados con cada carácter; nunca exijas una pausa para refrescar la lista.

El handle solo es insuficiente cuando hay colisiones de nombre. Cada fila de la listbox debe mostrar tres cosas: un avatar o badge de iniciales que sirva de ancla visual, el nombre completo en peso regular, y una línea secundaria con rol, equipo o departamento que rompa empates. Limita la lista a 5 o 7 resultados visibles; listas más altas obligan a hacer scroll que tapa el texto que se está escribiendo.

El popup debe operarse por completo sin ratón. Flecha abajo resalta la siguiente opción, flecha arriba la anterior; el wrap en los extremos es opcional pero útil. Enter, o Tab como convención secundaria, selecciona la opción resaltada e inserta el token en el cursor. Escape cierra el popup y restaura el texto crudo (@ma) para que el usuario siga escribiendo o abandone sin efectos. Hover y clic deben funcionar en paralelo sin conflicto.

Al seleccionar una persona, reemplaza el texto @query por un chip estilizado: un span con contenteditable false que lleva el nombre, el ID como data attribute y un tratamiento visual distintivo (forma de píldora, acento sutil). El chip se borra como una unidad atómica al presionar Backspace, no carácter por carácter. Deja un espacio (o un zero-width space) después del chip para que el cursor caiga en posición editable y el usuario siga escribiendo de inmediato.

Mandar una notificación a alguien que no puede abrir el contenido vinculado es una experiencia rota: recibe una alerta sobre la que no puede actuar. Antes de entregar la notificación, verifica que la persona tenga al menos acceso de lectura. Si no lo tiene, muestra un aviso en línea al momento de insertar ("@john.doe no puede ver este documento") con una acción de un clic para dar acceso o quitar la mención. Nunca descartes la notificación en silencio en el backend.

Las menciones de grupo amplio (@here, @channel, @everyone) interrumpen a cada miembro sin importar su estado de foco y no deben dispararse con un Enter descuidado. Muestra un paso de confirmación en línea (un callout no modal) que nombre la acción, indique el número exacto de destinatarios y ofrezca confirmar de un clic más un cancelar fácil. Restringe estas menciones a roles con permiso explícito y muestra un estado bloqueado con tooltip para quienes no lo tienen.

Los usuarios construyen un modelo mental desde la primera mención que escriben. Establece una gramática consistente: @ siempre refiere a personas y equipos; # siempre refiere a objetos (canales, issues, documentos, pull requests). Aplica la misma interacción de combobox a # que a @ para que la memoria muscular se transfiera. Distingue las filas con iconos por tipo de objeto (canal, issue, documento) para que el usuario escanee por forma en vez de leer etiquetas.

Un popup de mención dentro de un contenteditable es una superficie de accesibilidad de alto riesgo: el foco del DOM debe quedarse en el host, pero el lector de pantalla necesita anunciar el número de opciones y el ítem activo. Usa aria-activedescendant para transmitir la selección sin reubicar el foco. Añade una sola región aria-live polite (fuera del área editable) que anuncie el conteo al abrir ("5 resultados"); no dupliques regiones live o habrá doble lectura. Asegura que Escape vuelva a la edición normal y no atrape al usuario (WCAG 2.1.2).