Menus contextuels et actions rapides

1) Objet et champ d'application

• Actions locales sur l'objet (carte, ligne de tableau, coefficient).
• Actions par lots sur la sélection.
• Options cachées mais non critiques (mineures).
• Règle : Ne pas cacher les actions critiques et primaires uniquement dans le menu contextuel.

2) Déclencheurs et variantes

Right-click/Shift + F10/Menu key est un classique contextuel.
Icon button (kebab '⋮', meatballs '...', context) - universel pour tach/desktop.
Long-press (400-600 ms) est l'équivalent mobile de right-click.
Commande palette (⇧⌘P/Ctrl + K) : Commandes rapides globales avec recherche.
Swipe-reveal (listes iOS/Android) - ouvre un certain nombre de shortcats rapides.

Recommandation : fournir au moins deux façons d'appeler (icône + clic/touche contextuelle).

3) Contenu et priorité

Les 1 à 3 premiers points sont des actions fréquentes ; Puis le séparateur ; ensuite - moins utilisés.
Destructeurs - à la fin, marqués d'une couleur/icône (et souvent - par confirmation/undo).
La formulation est verbe + objet (« Ajouter aux favoris », « Copier l'ID »).
Le label ne ≠ qu'une icône : l'icône est un amplificateur, pas un remplacement de texte.

4) Groupement et état

Séparateurs pour blocs logiques (affichage, édition, admin, dangereux).
Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.
Nous ne montrons pas inaccessibles par rôle si cela est confus ; alternativement - nous montrons comme 'disabled' avec un indice de cause.

5) Disponibilité (A11y)

Conteneur : 'role =' menu ', éléments :' role = 'menuitem '/' menuitemcheckbox '/' menuitemradio'.
Roving tabindex : le seul' tabindex = » 0 » sur l'élément courant, les autres' -1 '.
Flèches ↑↓ - déplacement, →/← - entrée/sortie du sous-menu. Enter/Space - activation, Esc - fermer.
Typeahead : l'impression de la première lettre transfère le focus sur le point.
L'anneau de focalisation est visible ; le contraste du texte et des icônes ≥ AA.
Pour le bouton icône, utilisez 'aria-haspopup =' menu 'et'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) Positionnement et performance

Ouvrir le menu à la source (clic-point/icône), décalage 4-8 px ; Regardez les bords de l'écran (flip/shift).
Portail/calque au-dessus ('z-index') avec capture de clic à l'extérieur.
Rendez paresseusement, recyclez la liste dans les menus longs (pas de virtualisation nécessaire, mais éviter des centaines d'articles).
Animations uniquement 'opacity/bou', durée 140-200 ms (out plus rapide : 100-160 ms).
Ouvrez le sous-menu par 'ArrowRight' et hover avec un retard de 80-120 ms (anti-flicker).

7) Modèles mobiles

Long-press avec haptique ; timing 450 ± 100 ms.
Bottom sheet en tant que forme de menu contextuel (thumb-reachable).
Swipe actions dans les listes : à gauche, « archives/favoris », à droite, « supprimer » (confirmation/non).
Zones de clic ≥ 44 × 44, signatures brèves, icônes 20-24 px.

8) Confirmations, undo et sécurité

Actions destructives : Soit une deuxième confirmation (modal/confirm pattern), soit un undo de 5 à 10 s.
Financier/risqué - à travers une confirmation explicite avec un contexte de conséquences.
Montrez la raison de 'disabled' (« Droits insuffisants », « Limite atteinte »).

9) Actions rapides sans menu

Inline-shortkates dans la ligne (icônes « », « », « ⋯ »).
Hover-reveal (desktop) : montre les actions au pointage, mais laisse aussi un déclencheur explicite.
Commande palette : recherche par action, raccourcis clavier dans les conseils (« ⌘S », « Ctrl + Enter »).

10) Copywriting et icônes

Verbe + objet, 2-3 mots.
Commencez par l'action (« Supprimer l'enregistrement »...), pas par le nom (« Supprimer l'enregistrement »).
Des icônes d'un ensemble unique ; utilisez les mêmes pictogrammes pour les mêmes actions sur l'ensemble du produit.
Conseils explicatifs (« title »/tooltip) pour les points ambigus.

11) Télémétrie et expérimentation

CTR par point, médiane du temps entre l'ouverture et le clic, fréquence des écarts/undo.
Nombre de misclick's (destructeurs → annulés).
A/B : ordre et regroupement des points, présence de shortcats rapides dans la liste.
Les logs de points « invisibles » (personne n'utilise) sont des candidats à la suppression/transfert.

12) Tokens de système de conception (exemple)

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) Modèles par composant

Cartes/tuiles : icône '⋯' en haut à droite ; sur le hover - montré, sur la tache - toujours visible.
Lignes du tableau : '⋯' dans la dernière colonne ; dans le cas d'une sélection multiple, la barre d'actions par lots est supérieure/inférieure.
Listes de chat/notifications : swipe-actions (archive/lu/supprimé) avec undo.
Galeries de médias : tap long → mode multi-sélection + barre d'action inférieure.

14) Spécificité de iGaming

Mise rapide (quick bet) : Dans le menu contextuel du coefficient, « Mettre X », « Ajouter au coupon », « S'abonner à la modification du coefficient ». Confirmation/non obligatoire.
Favoris/abonnements : « Ajouter un fournisseur/jouer à favoris », « S'abonner à un tournoi ».
Cache-out : Avec confirmation en ligne et montant actuel ; disponible uniquement sur statut de marché.
Modération/reports : « Se plaindre », « Bloquer le chat » - sécurisés, visibles par les rôles.
Jeu responsable : « Fixer une limite », « Pause 24h » - sans couleurs agressives, avec une description claire des conséquences.

15) Anti-modèles

Les actions critiques ne sont cachées que dans le menu contextuel.
Articles sans texte (icônes uniques), en particulier dans les listes.
Fermeture accidentelle du curseur lors du passage au sous-menu (pas de retard/couloir).
Le menu recouvre l'élément source ou passe par l'écran (pas de flip/shift).
Destructif sans confirmation/undo.
Droits non évidents (le paragraphe disparaît sans explication).

16) Liste de vérification QA

Disponibilité

• 'role = « menu « '/' menuitem 'sont corrects, roving tabindex et flèches fonctionnent.
• Esc ferme le menu, le focus revient à la source.
• Le contraste et les anneaux de focus correspondent à AA.

Comportement

• L'ordre des points reflète la fréquence et le risque ; destructeurs en bas.
• Le positionnement tient compte des bords (flip/shift) ; les animations sont rapides (≤ 200 ms).
• Le sous-menu s'ouvre selon ArrowRight et ne tremble pas (hover-intent 80-120 ms).

Mobile

• Long-press avec haptique ; bottom-sheet est confortable avec le pouce.
• Swipe-actions ont undo ; les zones de la cabale ≥ 44 × 44.

Sécurité

• Confirmation/non d'actes dangereux ; les raisons sont claires.
• Il n'y a pas de fuite de données privées dans les indices/labels.

Métriques

• Le CTR/temps jusqu'au clic est retiré ; misclick/undo sont surveillés.

17) Réalisation : ouverture/fermeture et clic-out

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) Documentation dans le système de conception

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.
Tokens de taille/hauteur de ligne/rayon/animation.
Hydes par accessibilité (ARIA, clavier, typeahead).
« Do/Don't » avec des exemples de regroupement, de positionnement et de confirmation.

Résumé succinct

Les menus contextuels et les actions rapides accélèrent le travail, s'ils sont prévisibles, accessibles et sécurisés : deux chemins d'appel, des étiquettes claires avec des icônes, un regroupement raisonnable, une confirmation/sans risque, une navigation clavier correcte et un positionnement clair. Fixez les jetons et les modèles dans le système de conception - et les utilisateurs agiront rapidement sans crainte de se tromper.