Sistema de Acordeones UI

¿Qué hace Sistema de Acordeones UI?

Propósito

El skill Sistema de Acordeones UI proporciona una metodología para diseñar y estructurar acordeones: encabezados apilados que se expanden para revelar contenido asociado. Este patrón es esencial para la divulgación progresiva, permitiendo a los usuarios escanear información de alto nivel y elegir qué detalles consumir. Un enfoque sistemático garantiza que los acordeones reduzcan la carga cognitiva sin ocultar información crítica ni crear barreras de accesibilidad.

Casos de Uso

• Secciones de Preguntas Frecuentes: Organizar una lista larga de preguntas y respuestas en una lista escaneable.
• Menús Móviles: Colapsar elementos de navegación secundaria para ahorrar espacio vertical.
• Formularios Complejos: Agrupar campos de formulario relacionados en secciones manejables y alternables.
• Detalles de Producto: Ocultar especificaciones técnicas, información de envío o reseñas en páginas de comercio electrónico.
• Filtrado: Gestionar múltiples grupos de facetas en una barra lateral de descubrimiento.

Cuándo NO Usar

• Volúmenes Pequeños de Contenido: Si el contenido total es breve, ocultarlo tras un clic añade un costo de interacción innecesario.
• Instrucciones Críticas: Si el usuario debe leer la información para continuar (por ejemplo, advertencias legales o pasos de "cómo hacer"), no la oculte.
• Páginas con Búsqueda Intensiva: Si los usuarios necesitan usar "Buscar" del navegador (Cmd/Ctrl+F) con frecuencia; el contenido oculto del acordeón a menudo no es buscable por defecto.
• Divulgación de un Solo Elemento: Use un enlace simple "Mostrar más" o un componente de divulgación única si solo hay una pieza de contenido que alternar.

Entradas

1. Inventario de Contenido: Una lista de encabezados y su contenido expandido correspondiente.
2. Lógica de Expansión: ¿Debe abrirse solo un elemento a la vez (Exclusivo) o pueden abrirse varios?
3. Contexto del Disparador: ¿Dónde vivirá el acordeón? (por ejemplo, área de contenido principal, barra lateral o cajón móvil).
4. Sistemas Existentes: Escalas de espaciado fluido y tipografía del sistema de diseño padre.

Salidas

1. Especificación de Anatomía del Acordeón: Definiciones visuales para Encabezados, Iconos, Paneles y Espaciado.
2. Especificación de Interacción: Comportamiento para expansión, estados de enfoque y transiciones.
3. Plano de Accesibilidad: Roles ARIA, estados y mapeo de teclado.
4. Estrategia Responsiva: Reglas para cómo el acordeón se adapta a viewports estrechos.

Flujo de Trabajo

1. Estructurar la Anatomía del Contenido

Definir las partes estándar de un elemento de acordeón:

• El Encabezado (Disparador): El área cliqueable que contiene el título.
• El Icono (Indicio): Generalmente un cheurón o signo de más/menos para indicar expansibilidad.
• El Panel: El contenedor que alberga el contenido oculto.
• El Grupo: El contenedor padre que gestiona la relación entre múltiples elementos.

2. Establecer Indicios Visuales

Aplicar sistema-de-jerarquía-visual para asegurar que el acordeón sea reconocible:

• Indicadores de Estado: Usar iconos (cheurones) que roten o cambien cuando el acordeón esté abierto.
• Separación: Usar bordes, cambios de color de fondo o espaciado vertical (de sistema-de-espaciado-fluido) para distinguir elementos.
• Encabezados: Asegurar que el texto del encabezado se vea interactivo (mayor peso o color diferente).

3. Definir la Lógica de Interacción

Elegir el patrón de comportamiento:

• Exclusivo (Apertura Única): Abrir un elemento cierra automáticamente los demás. Mejor para enfoque y reducir la longitud de la página.
• Multi-Apertura: Varios elementos pueden permanecer abiertos. Mejor cuando los usuarios necesitan comparar información entre secciones.
• Estado por Defecto: Determinar si el primer elemento debe estar abierto por defecto para señalar funcionalidad.

4. Optimizar Espaciado y Contenido

Aplicar sistema-de-espaciado-fluido al interior:

• Relleno del Encabezado: Asegurar que el objetivo táctil tenga al menos 24x24px (WCAG 2.2 SC 2.5.8 mínimo); preferir 44x44px donde el diseño lo permita para un uso táctil cómodo.
• Relleno del Panel: Usar relleno interno para crear una relación clara entre el encabezado y su contenido.
• Transiciones: Usar transiciones sutiles de altura u opacidad (200-300ms) para suavizar el "salto" cuando aparece el contenido.

5. Verificar Accesibilidad y Capacidad de Respuesta

• Teclado: Los usuarios deben poder usar Tab para navegar a los encabezados y usar Enter/Espacio para alternar, según el patrón ARIA APG para acordeones.
• ARIA: Envolver cada disparador en un elemento de encabezado (<h3><button aria-expanded="true/false" aria-controls="id-panel">...</button></h3>) y dar al panel role="region" con aria-labelledby apuntando al disparador cuando los paneles contengan contenido sustancial.
• Móvil: Asegurar que los encabezados largos se ajusten elegantemente y no se superpongan con los iconos.

Reglas de Decisión

• La Regla del Cheurón: Siempre incluir un indicador visual (como un cheurón) en el lado derecho del encabezado. Debe apuntar hacia abajo cuando está cerrado y hacia arriba cuando está abierto.
• La Regla del Primer Elemento: Abrir el primer elemento del acordeón por defecto si contiene la información más importante o más solicitada.
• Truncamiento de Texto: Nunca truncar los encabezados del acordeón. Si un título es largo, permitir que se ajuste a múltiples líneas para asegurar claridad.
• Alineación: Mantener el icono de activación de expandir/colapsar consistente (generalmente alineado a la extrema derecha) para crear una ruta de escaneo predecible.

Restricciones

• Accesibilidad: Los encabezados deben usar etiquetas semánticas de encabezado (H2-H4) que contengan un <button> para acceso por teclado; cumple con el tamaño mínimo de objetivo táctil de WCAG 2.2 SC 2.5.8 (24x24px).
• Capacidad de Respuesta: El ancho del acordeón debe ser fluido (100% del padre). El contenido del panel debe ser completamente responsivo.
• Jerarquía: Los encabezados del acordeón nunca deben ser visualmente más prominentes que el H1 de la página.

Patrones Comunes de Falla

• Disparadores Tipo Cebo Misterioso: Encabezados de acordeón que parecen texto plano, dejando a los usuarios sin saber que se pueden hacer clic.
• Salto de Contenido: Transiciones rápidas y bruscas que desorientan la posición de desplazamiento del usuario.
• Falta de Estados de Enfoque: Olvidar diseñar un anillo de enfoque visible para usuarios de teclado.
• Paneles Sobrecargados: Colocar demasiado contenido interactivo complejo (como otros acordeones) dentro de un panel, llevando a una "anidación en inception".
• ARIA Inaccesible: No actualizar los estados aria-expanded programáticamente.

Criterios de Validación

• Cada elemento del acordeón tiene un indicador visual claro (por ejemplo, cheurón).
• Los encabezados son accesibles por teclado (basados en botón) con estados de enfoque visibles.
• aria-expanded y aria-controls están correctamente definidos.
• El espaciado interno sigue el sistema de espaciado fluido.
• La lógica de exclusividad/multi-apertura es apropiada para el tipo de contenido.
• El acordeón realiza transiciones suaves sin romper el diseño.
• Los objetivos táctiles cumplen con el mínimo de WCAG 2.2 de 24x24px (preferible 44x44px).