Sistema de Select y Combobox Personalizados

¿Qué hace Sistema de Select y Combobox Personalizados?

Propósito

El Sistema de Select y Combobox Personalizados proporciona una metodología sistemática para diseñar y estructurar opciones desplegables, selectores de búsqueda con autocompletado (comboboxes) y entradas de tokens de selección múltiple.

Los elementos HTML <select> estándar son notoriamente difíciles de estilizar de manera consistente entre navegadores, y no admiten composiciones de diseño enriquecidas (como descripciones, iconos, insignias o subcuadrículas dentro de opciones individuales). Sin embargo, los menús desplegables personalizados son una fuente frecuente de fallos catastróficos de accesibilidad, trampas de teclado y errores de usabilidad. Este skill establece estándares de diseño, espaciales y de interacción para garantizar que los componentes de selección personalizados sigan siendo visualmente cohesivos, altamente responsivos y completamente accesibles (cumpliendo con WCAG 2.2 AA).

---

Casos de Uso

Aplica este sistema al diseñar:

• Menús desplegables con contenido enriquecido: Elementos de selección que requieren indicadores visuales, subtítulos, metadatos auxiliares o insignias de estado (por ejemplo, selectores de país con iconos de bandera, conmutadores de espacio de trabajo o perfiles de cuenta).
• Selectores con búsqueda (Comboboxes): Menús desplegables con más de 10 opciones donde el usuario debe poder filtrar las opciones mediante un campo de búsqueda en línea (por ejemplo, listas largas de estados/provincias, selecciones de etiquetas).
• Campos de tokens de selección múltiple: Campos donde se permiten múltiples selecciones y deben mostrarse como insignias/chips descartables dentro o junto al contenedor del activador.
• Filtros de configuración dinámicos: Controles de filtro de alta densidad (por ejemplo, en barras laterales de comercio electrónico o paneles de datos) que necesitan una alineación de diseño enriquecida y retroalimentación contextual inmediata.

---

Cuándo NO Usar

NO apliques este sistema para:

• Volumen bajo de opciones (2 a 5 opciones): Usa un sistema-de-control-segmentado o botones de opción agrupados estándar. Esto evita ocultar las opciones detrás de un clic adicional y reduce la carga cognitiva.
• Navegación global de página: Si hacer clic en un elemento del menú desplegable redirige inmediatamente al usuario a una página diferente o nodo del mapa del sitio, usa sistema-de-navegación-del-sitio o un menú desplegable anidado. Las entradas de selección son campos de formulario semánticos destinados a editar propiedades, no a navegar por mapas del sitio.
• Formularios estándar sin estilo: Para formularios genéricos, de baja prioridad o de utilidad (como campos de contacto básicos), usa las entradas nativas del navegador <select>. Los menús desplegables nativos ofrecen una capacidad de respuesta móvil perfecta y gratuita, y soporte nativo para lectores de pantalla.
• Paletas de comandos de pantalla completa: Si el objetivo es buscar en todas las páginas y acciones de la aplicación en lugar de seleccionar un único valor de formulario, usa sistema-de-paleta-de-comandos.

---

Entradas

Antes de diseñar un select o combobox personalizado, recopila los siguientes requisitos:

1. Cardinalidad y densidad de opciones: ¿Cuántas opciones existen (por ejemplo, 5, 50, 500+)? ¿Cuál es la longitud máxima de caracteres?
2. Tipo de selección: ¿Selección única vs. selección múltiple? ¿Lista estática vs. lista de consulta filtrada asíncronamente (Combobox)?
3. Riqueza de datos: ¿Las opciones requieren elementos visuales auxiliares (iconos, avatares, banderas, chips de color) o texto de apoyo (subetiquetas, modificadores de precio, recuentos de usuarios activos)?
4. Contexto de diseño: ¿Estará en una barra lateral de alta densidad, una página de inicio espaciosa, un modal superpuesto o un panel de configuración persistente?
5. Tokens de marca: Escala de espaciado (sistema-de-espaciado-fluido), escala tipográfica (sistema-de-tipografía-fluida), anillos de enfoque (sistema-de-indicador-de-enfoque) y escalas de sombra de elevación (sistema-de-elevación-y-profundidad).

---

Salidas

Este sistema produce los siguientes entregables de diseño:

1. Especificación de anatomía: Plano detallado que muestra espaciado, alineaciones, iconos, reglas de truncamiento de texto y capas de borde/fondo tanto para el Activador como para el Panel Desplegable.
2. Matriz de estados e interacción: Estilos visuales definidos para los estados Flotante, Activo/Abierto, Seleccionado, Enfocado, Deshabilitado y Error de Validación.
3. Modelo adaptativo responsivo: Especificaciones estructurales que detallan cómo el menú desplegable de escritorio se traduce a las vistas móviles (por ejemplo, convirtiéndolo en un cajón/hoja inferior o una superposición de respaldo nativa).
4. Mapa de accesibilidad (WAI-ARIA y Teclado): Roles precisos, declaraciones de región en vivo, estados de seguimiento de enfoque y comportamiento de mapeo de teclas para entregar a los desarrolladores.

---

Flujo de Trabajo

1. Estructurar la Anatomía del Componente

Un sistema de selección personalizado completo consta de dos capas espaciales principales:

A. El Activador (El Campo)

• Contenedor: Altura igualada a las entradas de formulario adyacentes (típicamente de 40px a 48px para permitir objetivos táctiles). Utiliza un contorno neutro (contraste 3:1 contra el fondo de la página) y un relleno definido (generalmente 12px 16px).
• Ranura de valor/placeholder: Posicionada a la izquierda. El texto inactivo representa un placeholder (contraste >= 4.5:1 contra el fondo del campo). El texto seleccionado tiene un peso neutro primario.
• Indicación visual (Flecha Chevron): Posicionada en el extremo derecho. Utiliza un cheurón que apunta hacia abajo para indicar contenido plegable. Gira el cheurón 180 grados cuando el menú está activo.
• Insignias seleccionadas (solo selección múltiple): Chips en línea compactos con controles de cierre individuales (x) que se envuelven con gracia o se truncan con modificadores de conteo (por ejemplo, "+3 más").

B. El Panel Desplegable (El Menú)

• Contenedor superpuesto: Se encuentra en un nivel de eje Z más alto (sistema-de-elevación-y-profundidad Nivel 3/4). Se renderiza debajo del Activador de forma predeterminada, o encima de él si el borde del viewport restringe el espacio inferior. Utiliza una sombra distintiva (por ejemplo, box-shadow con un desenfoque suave) para elevarlo de la página de fondo.
• Contenedor de desplazamiento: Establece restricciones de altura máxima (típicamente 240px a 320px / 5–8 elementos) para evitar que el panel se desborde de la página. Utiliza una pista de desplazamiento visible que evite el cambio de barra de desplazamiento para listas más largas.
• Entrada de búsqueda (solo Combobox): Una entrada de búsqueda fija anclada en la parte superior del panel desplegable con enfoque persistente al activar el menú.

C. Elementos de Opción (Las Opciones)

• Diseño: Diseño flex horizontal que consiste en activos visuales a la izquierda, texto principal (y subtítulo si es una opción enriquecida) en el centro, e indicador de estado de selección (como una marca de verificación) a la derecha.
• Relleno seguro: Relleno vertical mínimo de 8px y coincidencia horizontal con el relleno horizontal del activador (12px a 16px).

+------------------------------------------+
|  Seleccionar País                   [v]  |  <-- Activador (Cerrado)
+------------------------------------------+

+------------------------------------------+
|  [Q] Buscar países...                    |  <-- Entrada de búsqueda fija
+------------------------------------------+
|  [x] Canadá                              |  <-- Opción (Seleccionada y Enfocada)
|      ISO: CA | +1 Código de País          |
|------------------------------------------|
|  [ ] Alemania                            |  <-- Opción (Predeterminada)
|      ISO: DE | +49 Código de País         |
+------------------------------------------+

---

2. Formular la Matriz de Estados y Retroalimentación

Diseña estilos distintos y no ambiguos para cada estado del ciclo de vida del componente:

• Estado predeterminado: El activador utiliza un contorno claro (contraste mínimo 3:1 contra el fondo de la página) con etiquetas de texto claras (contraste mínimo 4.5:1).
• Estado flotante: Un cambio sutil en el matiz de fondo en el activador (por ejemplo, gris de bajo contraste) y las filas de opciones para indicar capacidad interactiva. El cursor se establece en pointer.
• Estado enfocado: Un anillo de enfoque altamente visible que rodea el elemento activo. Para comboboxes, el enfoque debe estar en la entrada de búsqueda mientras la lista está abierta, pero utiliza un tratamiento de enfoque visual (por ejemplo, matiz de fondo o contorno activo) en la opción de lista resaltada.
• Estado activo/expandido: El cheurón gira, el contorno del activador cambia de color (por ejemplo, color de marca primario) y el Panel Desplegable aparece con una transición suave de altura y opacidad (150 ms a 250 ms).
• Estado seleccionado: Las filas de opciones cambian visualmente cuando se eligen. Utiliza un icono de marca de verificación de alto contraste en el extremo derecho y un relleno de fondo sutil. No te bases solo en el color para indicar la selección.
• Estado deshabilitado: La opacidad visual se reduce al 40%–50%. El cursor se convierte en un indicador not-allowed y el elemento se omite en el índice de tabulación.
• Estado de error/no válido: El contorno del activador cambia a un color de error de validación (generalmente rojo de alto contraste, >= 3.1 de contraste) con un mensaje de error e ícono de error debajo de la entrada.

---

3. Establecer Reglas Espaciales y de Posicionamiento

Para evitar conflictos de diseño y Cambio de Diseño Acumulativo (CLS):

• Posicionamiento dinámico (Comportamiento de giro): Calcula los límites del viewport. Si el contenedor desplegable está cerca del pliegue inferior del viewport, invierte su alineación para deslizarse hacia arriba por encima del activador.
• Alineación de ancho: El panel desplegable debe alinearse exactamente con los bordes izquierdo y derecho del activador, o tener un ancho mínimo definido que coincida con el activador para evitar inestabilidad visual.
• Aislamiento de superposición: Usa una pila de z-index CSS que coincida con el Nivel 3 (UI Flotante/Fija) o Nivel 4 (Superposición y Diálogos) de tu sistema de elevación. Siempre asegúrate de que el panel se renderice por encima de los elementos de formulario adyacentes, fondos y tarjetas de diseño.

---

4. Diseñar Adaptaciones Responsivas y para Móviles

Nunca fuerces un menú desplegable de escritorio de varias columnas o ancho en viewports móviles pequeños. Aplica estas reglas de diseño adaptativo:

Patrón A: Hoja Inferior Móvil (Recomendado para Opciones Enriquecidas)

En tamaños de pantalla inferiores a 640px (o puntos de interrupción de tableta estándar), transforma el panel desplegable personalizado en una Hoja Inferior deslizante:

• Activadores: Tocar el activador abre una superposición de hoja inferior de ancho completo.
• Cortina: Un fondo oscuro semitransparente (40% a 60% de opacidad) cubre el contenido principal, haciendo que los elementos de fondo no sean interactivos.
• Encabezado: La hoja contiene un encabezado fijo con un título claro y un botón de "Cerrar" (x) grande y táctil en la esquina superior derecha.
• Alcance del pulgar: Las filas de opciones ocupan todo el ancho de la pantalla con una altura objetivo táctil aumentada (mín. 48px, preferible 56px) para selecciones táctiles sin esfuerzo.

Patrón B: Alternativa Nativa (Recomendado para Listas Simples)

En viewports móviles, oculta por completo el marcado personalizado de los lectores de pantalla y el DOM visual, reemplazándolo con un elemento <select> nativo oculto visualmente y apilado en capas:

• Cómo funciona: Coloca un <select> estándar directamente sobre el activador personalizado, estilizado con opacity: 0.
• Resultado: El usuario ve tu activador de marca personalizado, pero tocarlo activa las ruedas de selección nativas del sistema operativo (iOS Picker o Android Dialog). Esto proporciona un rendimiento nativo inigualable y una accesibilidad local.

---

5. Definir la Arquitectura de Lector de Pantalla y Teclado

Los elementos de selección personalizados deben ser compatibles con todas las tecnologías de asistencia. Especifica este comportamiento preciso para la entrega:

Mapeos y Semántica ARIA

• El Botón Activador: Debe tener role="combobox", aria-haspopup="listbox", aria-expanded="true/false" y aria-controls="id-de-listbox".
• El Panel Desplegable: Debe tener role="listbox", etiquetado por el ID del activador (aria-labelledby="id-del-activador").
• Los Elementos de Opción: Deben tener role="option". El elemento seleccionado actualmente debe tener aria-selected="true", y los demás elementos deben tener aria-selected="false".
• Gestión de Enfoque: Para comboboxes de autocompletado, la entrada de búsqueda debe tener aria-autocomplete="list". Usa aria-activedescendant="id-de-opcion" en la entrada para rastrear la opción visualmente resaltada a medida que el usuario mueve las teclas de flecha hacia arriba y hacia abajo.
• Anuncios en Vivo: Usa aria-live="polite" o un elemento de anuncio de lector de pantalla designado para transmitir cambios de estado de selección o actualizaciones de conteo (por ejemplo, "5 opciones encontradas. Usa las teclas de flecha para navegar.").

Tabla de Interacción de Teclado

Tu hoja de especificaciones debe exigir estas asignaciones de teclas exactas:

Acción	Tecla	Comportamiento Esperado
Abrir Menú	Espacio o Enter o Flecha Abajo	Abre el panel desplegable, coloca el enfoque en la primera opción (o búsqueda).
Cerrar Menú	Escape o Tab	Cierra el panel, devuelve el enfoque del teclado al Activador.
Navegar Opciones	Flecha Abajo / Flecha Arriba	Mueve el estado de resaltado activo a la siguiente o anterior fila de opción.
Seleccionar Opción	Espacio o Enter	Selecciona la opción resaltada, actualiza el valor, cierra el panel.
Primer/Último Elemento	Inicio / Fin	Mueve el resaltado activo al inicio o final absoluto de la lista de opciones.
Salto de Búsqueda	Cualquier Tecla Alfanumérica	Si es estático, el enfoque salta inmediatamente a la primera opción que comienza con esa letra.

---

Reglas de Decisión

Árbol de Decisión de Opciones de Select Personalizado

¿Cuántas opciones totales existen?
 ├── 2 a 5 opciones ─────────> Usa CONTROL SEGMENTADO o BOTONES DE OPCIÓN AGRUPADOS
 ├── 6 a 10 opciones ────────> Usa SELECT PERSONALIZADO (Columna única, sin entrada de búsqueda)
 └── Más de 10 opciones ────> Usa COMBOBOX (Select personalizado con Entrada de Búsqueda integrada)

Elegir el Patrón de Selección Correcto

Requisito	Usa Select Estándar	Usa Combobox con Búsqueda	Usa Tokens de Selección Múltiple
Límite de Selección	Solo valor único	Solo valor único	Varios valores simultáneamente
Escala de Opciones	6 a 15 elementos	15 a 100+ elementos	5 a 50 elementos
Tipo de Fricción	Baja exploración	Necesita recuperación rápida de objetivo	Ensamblaje acumulativo
Diseño de Opción	Filas de texto simples	Filas de lista simples o enriquecidas	Diseño de ajuste de Chips/Tokens

---

Restricciones

• Preservación del Enfoque: Al cerrar el menú desplegable mediante Escape o haciendo clic fuera, el enfoque NUNCA debe perderse ni restablecerse al nivel superior del mapa del sitio. Debe regresar mediante programación al elemento Activador.
• Visibilidad del Enfoque (WCAG 2.2 SC 2.4.11): Los indicadores de enfoque en el activador o las opciones activas nunca deben ocultarse ni oscurecerse por encabezados de página fijos, barras inferiores flotantes o superposiciones superpuestas.
• Objetivo Táctil (WCAG 2.2 SC 2.5.8): Cada fila de opciones y elemento activador debe tener un tamaño clickeable mínimo de 24x24px, siendo la altura de 40px a 48px el requisito de diseño predeterminado para evitar superposiciones táctiles en dispositivos móviles.
• Contraste de Color (WCAG 2.2 SC 1.4.11): Los componentes y sus estados deben mantener una relación de contraste mínima de 3:1 para objetos no textuales (bordes, fondos de iconos) y 4.5:1 para contenido textual. Las opciones deshabilitadas pueden reducir la opacidad al 40%, pero aún deben cumplir con estos porcentajes de contraste en el estado habilitado.
• Gestión de la Superposición (Patrón 1.7 de Sistema de Superposición): El panel desplegable nunca debe quedar truncado por contenedores principales con overflow: hidden. Usa el renderizado de portal (por ejemplo, React Portal o una técnica similar) o un contexto de apilamiento externo para evitar la ocultación del recorte del diseño principal.