Menu contestuali e azioni rapide

1) Assegnazione e ambito di applicazione

• Azioni locali su un oggetto (scheda, riga della tabella, coefficiente).
• Azioni batch sulla selezione.
• Opzioni nascoste ma non critiche (secondarie).
• Regola: le azioni critiche e primarie non vengono nascoste solo nel menu di scelta rapida.

2) Trigger e varianti

Right-click/Maiusc + F10/Menu key è un contesto classico.
Icon button (kebab «⋮», meatballs «...», text) è universale per tac/dectop.
Long-press (400-600 ms) è l'equivalente mobile di right-click.
Command palette (⇧⌘P/Ctrl + K) è un team globale di ricerca veloce.
Swipe-reveal - Apre una serie di pantaloncini veloci.

Raccomandazione: fornire almeno due metodi di chiamata (icona + clic contestuale/tasto).

3) Contenuto e priorità

I primi 1-3 punti sono azioni frequenti; Quindi il separatore; di seguito, meno utilizzati.
Distruttivi - alla fine, contrassegnati con il colore/icona (e spesso attraverso la conferma/undo).
Formulazione - Verbo + oggetto (Aggiungi ai preferiti, Copia ID).
L'etichetta è solo l'icona, l'icona è l'amplificatore, non la sostituzione del testo.

4) Raggruppamento e stato

Separatori per blocchi logici (visualizzazione, modifica, admine, pericolosi).
Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.
Non mostra i ruoli non disponibili se questo confonde; in alternativa, come «disabled» con un indizio sul motivo.

5) Disponibilità (A11y)

Contenitore: «role =» menu «,» role = «menuitem »/« menuitemcheckbox »/« menuitemradio».
Roving tabindex: unico "tabindex =" 0 "sull'elemento corrente, gli altri" -1 ".
Frecce ↑↓ - spostamento, →/← - ingresso/uscita dal sottomenu. Invio/Space - Attivazione, Esc - Chiudi.
Typeahead - Stampare la prima lettera porta il punto attivo.
L'anello di fuoco è visibile; contrasto al testo e alle icone dell'AA.
Per un'icona-pulsante, utilizzare "aria-haspopup =" menu "e" 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) Posizionamento e performance

Aprire il menu all'origine (click-point/icona), spostare 4-8 px; tieni d'occhio i bordi dello schermo (flip/shift).
Portale/livello sopra ('z-index') con cattura click fuori.
Rendering pigro, riciclaggio dell'elenco in menu lunghi (non è necessario la virtualizzazione, ma evitare centinaia di voci).
Solo 'opacity/transfer', durata 140-200 ms (out più veloce: 100-160 ms).
Aprire il sottomenu in «ArrowRight» e hover con un ritardo di 80-120 ms (anti-flicker).

7) Pattern mobili

Long-press con l'haptica; Timing 450 © 100 mc.
Bottom sheet come forma di menu di scelta rapida (thumb-reachable).
Swipe action nell'elenco a sinistra è «archivio/preferiti» e a destra è «rimuovi» (conferma/undo).
Le zone click sono 44 x 44, le firme sono brevi, le icone 20-24 px.

8) Conferme, undo e sicurezza

Azioni distruttive: seconda conferma (modal/confirm pattern) o undo 5-10 s

Finanziario/Risk - attraverso un chiaro confirm con un contesto di conseguenze.
Mostra il motivo dì disabled "(" Autorizzato insufficiente "," Limite raggiunto ").

9) Azioni rapide senza menu

Inline-shortcat nella riga (icone «», «,»).
Hover-reveal (dectop) - Mostra le azioni di guida, ma lascia anche il trigger esplicito.
Comando palette - Cerca azioni, tasti caldi nei suggerimenti («⌘S», «Ctrl + Invio»).

10) Copiratting e icone

Verbo + oggetto, 2-3 parole.
Iniziare con l'azione (Elimina record...), non con l'azione esistente (Elimina record).
Icone di un unico set; Utilizzare le stesse icone per le stesse azioni su tutto il prodotto.
Suggerimenti di spiegazione («title »/tooltip) per punti ambigui.

11) Telemetria ed esperimenti

CTR per voce, tempo medio da apertura a click, frequenza di flusso/undo.
Numero misclic'ov '(cancellato).
A/B: ordine e raggruppamento delle voci, presenza di pantaloncini veloci nella lista.
I fogli delle voci «invisibili» (nessuno usa) sono candidati per l'eliminazione o la migrazione.

12) Token di progettazione (esempio)

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) Pattern per componente

Tessere/piastrelle: icone «⋯» nell'angolo superiore destro; A hover - mostra, a tac - si vede sempre.
Righe della tabella «⋯» nell'ultima colonna; Quando la selezione è multipla, la barra delle azioni batch in alto/in basso.
Elenchi chat/notifiche swipe-action (archivio/letto/rimuovi) con undo.
Gallerie multimediali: modalità multivendor più lunga + barra delle azioni inferiore.

14) Specificità del iGaming

Tasso rapido (quick bet) - Nel menu di scelta rapida del coefficiente, Imposta X, Aggiungi al buono, Sottoscrivi per modificare il coefficiente. La conferma/undo è obbligatoria.
Preferiti/abbonamenti: «Aggiungi provider/gioco ai preferiti», «Iscriviti al torneo».
Cache: con conferma inline e importo corrente; disponibile solo allo stato del mercato.
«Lamentarsi», «Blocca chat» sono sicuri, visibili in base ai ruoli.
Gioco responsabile: «Imposta un limite», «Pausa 24h» - senza colori aggressivi, con una chiara descrizione degli effetti.

15) Anti-pattern

Le azioni critiche sono nascoste solo nel menu di scelta rapida.
Voci senza testo (singole icone), soprattutto negli elenchi.
Chiusura accidentale per l'uscita del cursore durante il passaggio al sottomenu (nessun ritardo/corridoio).
Il menu sovrappone l'elemento sorgente o va oltre lo schermo (nessun flip/maiusc).
Distruttivi senza conferma/undo.
Diritti non chiari (la voce scompare senza spiegazione).

16) Lista assegni QA

Disponibilità

• 'role = «menu «'/' menuitem ', corretto, roving tabindex e frecce funzionanti.
• Esc chiude il menu e il fuoco torna all'origine.
• Il contrasto e gli anelli di fuoco corrispondono ad AA.

Comportamento

• L'ordine dei punti riflette la frequenza e il rischio; distruttivi di sotto.
• Il posizionamento tiene conto dei bordi (flip/shift); animazioni veloci (≤ 200 ms).
• Il sottomenu viene aperto per ArrowRight e non trema (hover-intent 80-120 ms).

Mobile

• Long-press con haptica; bottom-sheet è comodo con il pollice.
• Le azioni Swipe sono undo; zona click 44 x 44.

Sicurezza

• Conferma/undo per azioni pericolose; le ragioni del disabled sono chiare.
• Nessuna perdita di dati privati nei suggerimenti/etichette.

Metriche

• Toglie CTR/tempo prima del click; misclick/undo monitor.

17) Implementazione: apertura/chiusura e click-fuori

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) Documentazione in progettazione

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.
Token di dimensioni/altezza riga/raggio/interpolazione.
Guidi per la disponibilità (ARIA, tastiera, typeahead).
«Do/Don't» con esempi di raggruppamento, posizionamento e conferma.

Breve riepilogo

I menu contestuali e le azioni rapide accelerano se prevedibili, disponibili e sicure: due percorsi di chiamata, etichette chiare con icone, raggruppamento intelligente, conferma/undo per il rischio, navigazione corretta e posizionamento chiaro. Fissate i token e i pattern nel sistema di progettazione e gli utenti agiranno rapidamente senza paura di sbagliare.