Menús contextuales y acciones rápidas

1) Propósito y ámbito de aplicación

• Acciones locales sobre el objeto (tarjeta, fila de tabla, coeficiente).
• Acciones por lotes sobre selección.
• Opciones ocultas pero no críticas (secundarias).
• Regla: las acciones críticas y primarias no se ocultan sólo en el menú contextual.

2) Disparadores y opciones

Right-click/Shift + F10/Menu key es un contexto clásico.
Icon button (kebab '⋮', meatballs '...', context) es versátil para el tach/desktop.
Long-press (400-600 ms) es el equivalente móvil al right-click.
El comando palette (⇧⌘P/Ctrl + K) son comandos rápidos globales con búsqueda.
Swipe-reveal (listas iOS/Android) - abre una serie de cortos rápidos.

Recomendación: proporcione un mínimo de dos métodos de llamada (icono + clic/tecla de contexto).

3) Contenido y prioridad

Los primeros 1-3 puntos son acciones frecuentes; a continuación, separador; a continuación, las menos utilizadas.
Destructivo - al final, marcado con el color/icono (y a menudo - a través de la confirmación/undo).
Formulaciones - verbo + objeto («Añadir a favoritos», «Copiar ID»).
La etiqueta ≠ sólo un icono: el icono es un amplificador, no un reemplazo de texto.

4) Agrupación y estado

Separadores para bloques lógicos (ver, editar, administrar, peligroso).
Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.
No mostramos roles inaccesibles si esto confunde; alternativamente - mostramos como 'disabled' con una pista de la razón.

5) Disponibilidad (A11y)

Contenedor: 'role =' menu ', elementos:' role = 'menuitem '/' menuitemcheckbox '/' menuitemradio'.
Roving tabindex: el único 'tabindex =' 0 'en el elemento actual, el resto' -1 '.
Flechas ↑↓ - mover, →/← - entrar/salir del submenú. Enter/Space - Activación, Amb - Cerrar.
Typeahead: imprimir la primera letra transfiere el enfoque al elemento.
El anillo focal es visible; contraste de texto e iconos ≥ AA.
Para el icono-botón, utilice 'aria-haspopup =' menu 'y' aria-expanded '.

html
<button id="more" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-1">Еще</button>
<ul id="menu-1" role="menu" aria-labelledby="more" hidden>
<li role="menuitem" tabindex="0">Открыть</li>
<li role="menuitem">Скопировать ссылку</li>
<li role="menuitemcheckbox" aria-checked="true">В избранном</li>
<li role="menuitem" data-danger="true">Удалить</li>
</ul>

js const menu = document.getElementById('menu-1');
menu.addEventListener('keydown', e=>{
const items=[...menu.querySelectorAll('[role^="menuitem"]')];
let i=items.findIndex(n=>n.tabIndex===0);
if(e.key==='ArrowDown'){ items[i].tabIndex=-1; items[(i+1)%items.length].tabIndex=0; items[(i+1)%items.length].focus(); e.preventDefault(); }
if(e.key==='ArrowUp'){ items[i].tabIndex=-1; items[(i-1+items.length)%items.length].tabIndex=0; items[(i-1+items.length)%items.length].focus(); e.preventDefault(); }
if(e.key==='Escape'){ menu.hidden=true; document.getElementById('more').focus(); }
});

6) Posicionamiento y rendimiento

Abra el menú en la fuente (click-point/icono), desplazamiento 4-8 px; vigile los bordes de la pantalla (flip/shift).
Portal/capa en la parte superior ('z-index') con un clic fuera de la captura.
Renderiza con pereza, recicla la lista en menús largos (no hace falta virtualización, pero evita cientos de elementos).
Animaciones sólo 'opacity/transformación', duración 140-200 ms (fuera más rápido: 100-160 ms).
El submenú se abre por 'ArrowRight' y hover con un retraso de 80-120 ms (anti-flicker).

7) Patrones móviles

Long-press con háptica; timing 450 ± 100 ms.
Hoja de bottom como forma de menú contextual (thumb-reachable).
Acciones swipe en las listas: a la izquierda - «archivo/favoritos», a la derecha - «eliminar» (confirmación/undo).
Zonas de clic ≥ 44 × 44, las firmas son breves, los iconos son 20-24 px.

8) Confirmaciones, undo y seguridad

Acciones destructivas: o bien la segunda confirmación (modal/confinm pattern) o undo 5-10 s.
Financiera/de Riesgo - a través de un claro confinamiento con el contexto de las consecuencias.
Muestra la razón 'deshabilitada' ('No tiene razón', 'Ha alcanzado el límite').

9) Acciones rápidas sin menú

Shortcats en línea en línea (iconos «», «», «⋯»).
Hover-reveal (escritorio): muestra las acciones al guiar, pero también deja un disparador explícito.
Comando palette: búsqueda por acción, teclas de acceso rápido en las pistas («⌘S», «Ctrl + Enter»).

10) Copyright e iconos

Verbo + objeto, 2-3 palabras.
Comience con una acción («Eliminar registro»...), no con un sustantivo («Eliminar registro»).
Iconos de un solo conjunto; utilice los mismos pictogramas para realizar las mismas acciones en todo el producto.
Pistas explicativas ('title '/tooltip) para elementos ambiguos.

11) Telemetría y experimentos

CTR por artículo, mediana de tiempo de apertura a clic, frecuencia cancelada/undo.
Número de misclick's (destructivo → cancelado).
A/B: orden y agrupación de elementos, presencia de cortos rápidos en la lista.
Los registros de elementos «invisibles» (nadie utiliza) son candidatos a la eliminación/transferencia.

12) Tokens del sistema de diseño (ejemplo)

json
{
"menu": {
"minWidth": 208,
"itemHeight": 36,
"gap": 4,
"padding": 8,
"radius": 12,
"elev": 8,
"anim": { "inMs": 180, "outMs": 120, "ease": "cubic-bezier(0.2,0,0.2,1)" }
},
"swipe": { "revealThresholdPx": 56, "confirmDestructive": true }
}

css
.menu{min-width:208px;padding:8px;border-radius:12px;box-shadow:var(--elev-3);background:var(--bg-elevated)}
.menu [role^="menuitem"]{height:36px;padding:0 12px;display:flex;gap:8px;align-items:center;border-radius:10px}
.menu [role^="menuitem"]:hover,
.menu [role^="menuitem"][tabindex="0"]{background:var(--bg-hover)}
.menu [data-danger="true"]{color:var(--role-danger)}

13) Patrones por componente

Tarjetas/fichas: icono '⋯' en la esquina superior derecha; en hover - se muestra, en touch - se ve siempre.
Filas de la tabla: '⋯' en la última columna; con selección múltiple: panel de acciones por lotes en la parte superior/inferior.
Listas de chat/notificaciones: swipe-actions (archivo/leído/eliminado) con undo.
Galerías de medios: tap largo → modo multi-juego + barra de acción inferior.

14) Especificidad de iGaming

Apuesta rápida (apuesta rápida): en el menú contextual del coeficiente - «Poner X» (preconfiguración), «Añadir al cupón», «Suscribirse al cambio de coeficiente». La confirmación/undo es obligatoria.
Favoritos/suscripciones: «Añadir proveedor/juego a favoritos», «Suscribirse a un torneo».
Cache out: con confirmación en línea y suma actual; sólo está disponible cuando el estado del mercado.
Moderación/reportes: «Quejarse», «Bloquear Chat» son seguros, visibles por sus roles.
Juego responsable: «Establecer un límite», «Pausa 24h» - sin colores agresivos, con una clara descripción de las consecuencias.

15) Anti-patrones

Las acciones críticas sólo se ocultan en el menú contextual.
Párrafos sin texto (algunos iconos), especialmente en las listas.
Cierre accidental para la salida del cursor al pasar al submenú (sin retraso/pasillo).
El menú superpone el elemento de origen o sale de la pantalla (sin flip/mayúsculas).
Destructivo sin confirmación/undo.
Derechos inobjetables (el párrafo falta sin explicación).

16) QA-check-list

Disponibilidad

• 'role =' menu '/' menuitem 'son correctos, roving tabindex y las flechas funcionan.
• Aprox cierra el menú, el foco vuelve a la fuente.
• El contraste y los anillos de enfoque corresponden a AA.

Comportamiento

• El orden de los puntos refleja la frecuencia y el riesgo; destructivo en la parte inferior.
• El posicionamiento tiene en cuenta los bordes (flip/shift); animaciones rápidas (≤ 200 ms).
• El submenú se abre por ArrowRight y no «tiembla» (hover-intent 80-120 ms).

Móvil

• Long-press con háptica; bottom-sheet cómodo con el pulgar.
• Swipe-actions tienen undo; zonas de la cábala ≥ 44 × 44.

Seguridad

• Confirmación/undo para actividades peligrosas; las razones disabled son claras.
• No hay filtración de datos privados en las pistas/etiquetas.

Métricas

• Se dispara CTR/tiempo antes del clic; misclick/undo monitor.

17) Implementación: apertura/cierre y clic-hacia fuera

js const btn=document.getElementById('more'), menu=document.getElementById('menu-1');
const open=()=>{ menu.hidden=false; btn.setAttribute('aria-expanded','true'); menu.querySelector('[role^="menuitem"]').focus(); };
const close=()=>{ menu.hidden=true; btn.setAttribute('aria-expanded','false'); btn.focus(); };
btn.addEventListener('click', e=>{ menu.hidden?open():close(); });
document.addEventListener('pointerdown', e=>{ if(!menu.hidden &&!menu.contains(e.target) && e.target!==btn) close(); });
window.addEventListener('blur', close);

18) Documentación en el sistema de diseño

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.
Señales de tamaño/altura de fila/radio/animación.
Gaidas por accesibilidad (ARIA, teclado, typeahead).
"Do/Don 't' con ejemplos de agrupación, posicionamiento y confirmaciones.

Resumen breve

Los menús contextuales y las acciones rápidas aceleran si son predecibles, accesibles y seguros: dos rutas de llamada, etiquetas claras con iconos, agrupación razonable, confirmación/undo de riesgo, navegación por teclado correcta y posicionamiento claro. Fije los tokens y patrones en el sistema de diseño, y los usuarios actuarán rápidamente sin temor a equivocarse.