Sistema de Menús Desplegables

Sistema de Menús Desplegables y Menús Contextuales

Propósito

El skill de Sistema de Menús Desplegables proporciona un marco estandarizado para diseñar menús de acción flotantes, menús de desbordamiento, menús contextuales y submenús en cascada a través de interfaces web. Los menús desplegables muestran una lista organizada de comandos interactivos, opciones o subacciones asociadas a un elemento desencadenante (como un botón de icono, un botón dividido o una acción contextual).

Diseñar un sistema de menús desplegables eficaz requiere equilibrar el diseño espacial, la jerarquía visual, la agrupación de elementos, la semántica de navegación por teclado, el manejo de colisiones (límites del viewport) y la adaptación responsiva en viewports táctiles móviles sin desorientar a los usuarios ni violar las pautas de accesibilidad WCAG 2.1 AA.

Casos de Uso

• Menús de Acción y Opciones: Presentar acciones secundarias de página o fila (p. ej., "Editar", "Duplicar", "Exportar", "Eliminar") asociadas a un botón desencadenante en tablas de datos, tarjetas o encabezados de página.
• Menús de Desbordamiento y "Más": Alojar herramientas de baja prioridad o enlaces de navegación cuando el espacio del contenedor es limitado (p. ej., botones "..." en barras de herramientas o encabezados de tabla).
• Menús Emergentes Contextuales: Mostrar comandos contextuales específicos activados mediante clic derecho o pulsación larga en elementos visuales de un lienzo o lista.
• Submenús en Cascada: Organizar acciones anidadas u opciones de categorías de varios niveles dentro de un menú superpuesto de varios niveles.
• Menús de Acción de Selección (Elementos Marcables y de Radio): Alternar estados de vista, visibilidad de columnas o preferencias de ordenación dentro de paneles de acción flotantes.

Cuándo NO Usar

• Entradas de Selección de Formularios (Comboboxes y Selectores): Para entradas de formulario donde los usuarios eligen uno o varios valores para rellenar un campo (p. ej., seleccionar un país o categoría de producto), utiliza custom-select-and-combobox-system.
• Paneles de Navegación de Alta Densidad: Para navegación global de varios sitios con columnas que contienen categorías estructuradas, páginas de destino y promociones de marketing, utiliza mega-menu-navigation-system.
• Espacios de Trabajo de Tareas Complejas y Modales Grandes: Para subtareas complejas, ediciones de varios campos o formularios de asistente de varios pasos que requieren enfoque preservado, utiliza overlay-and-dialog-system o bottom-sheet-design-system.
• Ayuda Contextual e Información sobre Herramientas: Para descripciones de texto no interactivas al pasar el ratón o al enfocar que explican la función de un elemento, utiliza tooltip-and-hint-system.

Entradas

1. Componente Desencadenante y Geometría: Tipo de elemento desencadenante principal (botón estándar, botón de icono, botón dividido o área de destino de clic derecho) y posicionamiento espacial.
2. Inventario y Jerarquía de Elementos del Menú: Lista de acciones, tipos de elementos (estándar, marcable, radio, destructivo), iconos, atajos de teclado, separadores y etiquetas de sección de grupo.
3. Tokens de Superficie y Elevación: Colores de superficie de fondo, estilos de borde, tokens de sombra paralela (--elevation-popover) y posicionamiento z-index (--z-popover) de elevation-and-depth-system y accessible-color-system.
4. Contexto de Viewport y Dispositivo: Orientación del dispositivo, punto de interrupción de ancho de pantalla y características de soporte táctil.

Salidas

1. Plano de Anatomía y Diseño del Menú: Especificación estructural CSS y HTML para el tamaño del contenedor del menú, el relleno, la alineación de elementos, las sugerencias de atajos finales y el espaciado de los separadores de sección.
2. Estrategia de Posicionamiento Espacial y Colisiones: Reglas de diseño para el posicionamiento del anclaje (superior/inferior/izquierda/derecha), alineación, lógica de volteo/deslizamiento dinámico y límites de desplazamiento de altura máxima.
3. Modelo de Adaptación Móvil Responsiva: Especificación de diseño que transforma los menús desplegables flotantes de escritorio estrechos en hojas de acción inferiores (bottom-sheet-design-system) o listas táctiles de ancho completo en viewports móviles.
4. Especificación de ARIA y Navegación por Teclado: Reglas de accesibilidad programáticas que cubren roles ARIA (role="menu", role="menuitem", role="menuitemcheckbox", role="menuitemradio"), estados expandidos (aria-expanded) y gestión de enfoque con teclas de flecha.

---

Flujo de Trabajo

1. Definir la Estructura del Menú y la Anatomía de los Elementos

Clasificar los elementos dentro del menú en grupos funcionales lógicos para maximizar la escaneabilidad:

• Encabezados y Etiquetas de Sección: Agrupar acciones relacionadas utilizando microtipografía en mayúsculas o encabezados de sección sutiles (font-size: 0.75rem, font-weight: 600, letter-spacing: 0.05em).
• Composición de Elemento Estándar: Alinear elementos horizontalmente usando flexbox (gap: 0.75rem):
  • Gráfico Principal: Icono de 16x16px o 20x20px que aclara el propósito de la acción.
  • Texto de Etiqueta: Verbo conciso orientado a la acción (p. ej., "Descargar PDF", "Duplicar elemento").
  • Sugerencia de Atajo Final: Texto de atajo de teclado en fuente monoespaciada (p. ej., ⌘E, Ctrl+D) atenuado visualmente (color: var(--text-tertiary)).
  • Flecha Final: Indica un desencadenante de submenú en cascada (>).
• Tipos de Elementos Especializados:
  • Elementos Marcables (role="menuitemcheckbox"): Mostrar marcas de verificación principales cuando están activos.
  • Elementos de Radio (role="menuitemradio"): Mostrar puntos de radio cuando están seleccionados dentro de un grupo.
  • Elementos Destructivos: Dar estilo a acciones negativas (p. ej., "Eliminar", "Quitar") con tokens de color de advertencia distintivos (color: var(--color-danger)), separadas de las acciones benignas mediante una línea divisoria visual.
• Divisores (role="separator"): Utilizar reglas horizontales sutiles (1px solid var(--border-subtle)) para segmentar grupos de acciones distintas (p. ej., agrupar acciones de vista por separado de las acciones de edición/eliminación).

2. Establecer el Posicionamiento Espacial y el Manejo de Colisiones

Configurar reglas de diseño para que el menú se renderice limpiamente junto a su desencadenante sin desbordar los bordes de la pantalla:

• Alineación del Anclaje: Posicionar el menú emergente en relación con el límite del botón desencadenante:
  • Inferior-Izquierda / Inferior-Derecha: Posicionamiento predeterminado debajo del botón desencadenante. Alinear al borde derecho cuando el desencadenante se encuentra cerca del borde derecho de la pantalla (p. ej., columnas de acción de fila en tablas de datos).
  • Superior-Izquierda / Superior-Derecha: Voltear la dirección por encima del botón desencadenante cuando está cerca de la parte inferior del viewport.
• Colisión con el Viewport y Reglas de Volteo:
  • Mantener un margen mínimo de 12px desde los bordes de la pantalla (viewport-margin: 12px).
  • Establecer una restricción de altura máxima (max-height: calc(100vh - 32px)) con desplazamiento vertical interno (overflow-y: auto) para menús largos.
• Tokens de Elevación: Aplicar apilamiento de capa superior (z-index: var(--z-popover)) y sombras paralelas (box-shadow: var(--shadow-popover)) para separar visualmente el menú flotante de las filas o tarjetas de fondo de la tabla.

3. Configurar la Interacción y la Dinámica de los Submenús

• Estados del Desencadenante: Asegurar que los botones desencadenantes indiquen el estado abierto activo usando aria-expanded="true" y un estado visual presionado sutil (background-color: var(--bg-hover)).
• Retardo de Submenú por Hover y Teclado:
  • Los submenús en cascada se abren al pasar el ratón con un ligero retardo intencional (temporizador de intención de 150–200 ms) para evitar destellos de activación accidental durante el movimiento del puntero.
  • Pulsar ArrowRight en un desencadenante de submenú expande el submenú y mueve el enfoque hacia adentro; ArrowLeft cierra el submenú y devuelve el enfoque al elemento del menú principal.
• Desencadenantes de Desestimación: Desestimar la superposición del menú abierto cuando:
  • El usuario hace clic fuera del panel del menú (oyente de clic externo).
  • El usuario presiona la tecla Escape.
  • Se ejecuta una acción de elemento de menú activo (a menos que sea un elemento de alternancia marcable).
  • El enfoque sale de la superposición del menú.

4. Diseñar la Adaptación Móvil Responsiva

Los menús desplegables flotantes de escritorio (p. ej., cajas flotantes de 220px) funcionan mal en pantallas táctiles móviles debido a los objetivos táctiles pequeños y las necesidades de posicionamiento preciso:

• Transformación Táctil Móvil (< 768px):
  • Transformar los menús desplegables de escritorio en una Hoja de Acción Inferior (bottom-sheet-design-system) anclada en la parte inferior del viewport.
  • Aumentar la altura de las filas de elementos a un objetivo táctil mínimo de 44px (preferiblemente 48px) con zonas táctiles horizontales de ancho completo.
  • Proporcionar un controlador de arrastre visual explícito o un botón claro "Cancelar" en la parte inferior de la hoja para una desestimación con el pulgar sin esfuerzo.
• Retroalimentación Táctil: Aplicar estados de fondo táctil activo distintos (:active) para una retroalimentación táctil inmediata.

5. Programar Accesibilidad y Semántica de Teclado

• Hito ARIA y Mapeo de Roles:
  • Establecer botón desencadenante: aria-haspopup="menu", aria-expanded="true|false", aria-controls="menu-id".
  • Establecer contenedor del menú: role="menu", aria-labelledby="trigger-id", tabindex="-1".
  • Establecer elementos del menú: role="menuitem", role="menuitemcheckbox" o role="menuitemradio".
• Modelo de Navegación por Teclado:
  • Enter / Space / ArrowDown en el desencadenante: Abre el menú y enfoca el primer elemento del menú.
  • ArrowDown / ArrowUp: Navega el enfoque secuencialmente a través de los elementos del menú (rodeando de arriba a abajo).
  • Home / End: Mueve el enfoque directamente al primer o último elemento del menú.
  • Escape: Cierra el menú inmediatamente y devuelve el enfoque al botón desencadenante.
  • Tab: Cierra el menú inmediatamente y permite la progresión estándar del enfoque del documento.
  • Búsqueda de Caracteres por Tipo: Pulsar una tecla de letra (p. ej., "D") mueve el enfoque directamente al siguiente elemento del menú que comienza con esa letra.

---

Reglas de Decisión

Selección de Tipo de Menú y Contexto

Contexto / Objetivo	Patrón Recomendado	Estructura ARIA	Adaptación Móvil
Acciones de Fila / Tarjeta	Menú Desplegable de Acción	role="menu" / role="menuitem"	Hoja de Acción Inferior
Desbordamiento de Barra de Herramientas ("...")	Menú de Desbordamiento	role="menu" / role="menuitem"	Hoja de Acción Inferior
Herramientas de Lienzo con Clic Derecho	Menú Contextual	role="menu" / role="menuitem"	Hoja Inferior por Pulsación Larga
Selección de Opciones de Formulario	Selector Combobox	role="combobox" / role="option"	Selector Nativo / Hoja Inferior
Alternancias de Vista / Filtro Multinivel	Panel de Acción Marcable	role="menu" / role="menuitemcheckbox"	Hoja de Acción Inferior

Reglas de Posicionamiento y Alineación

• Menús de Filas de Tablas de Datos: Posicionar alineados superior-derecha o inferior-derecha al botón desencadenante para evitar el truncamiento horizontal más allá del borde derecho del viewport de la tabla.
• Acciones de Encabezado / Navegación: Posicionar inferior-derecha o inferior-izquierda dependiendo de la proximidad al borde de la pantalla.
• Submenús: Abrir a la derecha (left: 100%) de forma predeterminada; si el espacio a la derecha es inferior a 200px, voltear para abrir a la izquierda (right: 100%).

---

Restricciones

• Accesibilidad (WCAG 2.1 AA):
  • SC 1.4.3 Contraste (Mínimo): El texto de los elementos, los iconos y las sugerencias de teclado deben mantener al menos una relación de contraste 4.5:1 con respecto al fondo del menú.
  • SC 2.1.1 Teclado: Cada elemento y acción dentro del menú debe ser completamente accesible y activable mediante teclado.
  • SC 2.4.7 Foco Visible: Los elementos del menú enfocados deben presentar estados de foco visuales distintos (p. ej., cambio de color de fondo + indicador de resaltado que cumpla con el contraste).
  • SC 2.5.8 Tamaño del Objetivo: Los elementos del menú de escritorio deben mantener al menos 32px de altura; los elementos de la hoja de acción móvil deben cumplir con objetivos táctiles de al menos 44x44px.
• Restricciones de Límite del Viewport: Los menús abiertos nunca deben extenderse fuera de la pantalla ni crear barras de desplazamiento horizontales en la página. Utilizar volteo por colisión y desplazamiento vertical interno (max-height).
• Relleno Espacial y Densidad: Mantener un relleno horizontal interno consistente (p. ej., padding: 0.5rem 0.75rem) y un relleno vertical del contenedor (padding: 0.25rem 0).

---

Patrones de Falla Comunes

• Confusión con Combobox de Formulario: Usar role="menu" para menús desplegables de selección de formulario en lugar de role="combobox" / role="listbox", confundiendo a los lectores de pantalla sobre la selección de valores versus la ejecución de comandos.
• Desorientación del Foco al Cerrar: No restaurar el foco del teclado de vuelta al botón desencadenante cuando el menú se cierra mediante Escape o selección, dejando el foco perdido en document.body.
• Trampa del Contenedor Recortado: Colocar menús desplegables dentro de celdas de tabla o contenedores con overflow: hidden, lo que provoca que el menú abierto se recorte visualmente.
• Objetivos Táctiles Móviles Pequeños: Renderizar elementos diminutos de menú desplegable de escritorio de 24px en pantallas táctiles sin convertirlos en hojas inferiores táctiles.
• Desestimación Accidental de Submenú: Falta de un temporizador de intención de retardo en submenús en cascada, lo que provoca que los submenús se colapsen cuando el ratón se mueve en diagonal hacia un subelemento.

---

Criterios de Validación

• El contenedor del menú utiliza semántica ARIA apropiada (role="menu", role="menuitem", role="separator").
• La navegación por teclado admite completamente ArrowDown, ArrowUp, Home, End, Escape y la búsqueda por tipo de letra.
• Cerrar el menú (mediante Escape o clic en un elemento) restaura programáticamente el foco al elemento desencadenante.
• Las reglas de colisión del viewport voltean o desplazan los menús largos limpiamente sin desbordamiento de pantalla.
• El punto de interrupción responsivo (< 768px) transforma los menús desplegables flotantes de escritorio en hojas de acción inferiores táctiles.
• El texto de los elementos, las sugerencias de atajos y los fondos del indicador de foco cumplen con el contraste WCAG AA (≥4.5:1).