Menus contextuais e ação rápida

1) Destino e alcance

• Ações locais sobre o objeto (cartão, linha de tabela, coeficiente).
• Ações de lote sobre seleção.
• Opções ocultas, mas não críticas (secundárias).
• Regra: Ações críticas e primárias não escondidas apenas no menu contextual.

2) Desencadeadores e opções

Right-click/Shift + F10/Menu key é um contexto clássico.
Icon Button (kebab '⋮', meatballs '...', context) é versátil para o cachê/dectop.
Long-press (400-600 ms) é o equivalente móvel à right-click.
Command palette (⇧⌘P/Ctrl + K) - comandos de busca rápidos globais.
Swipe-reveal (listas iOS/Android) - Abre uma série de shortcats rápidos.

Recomendação: forneça pelo menos dois métodos de chamada (ícone + clique contextual/tecla).

3) Conteúdo e prioridade

Os primeiros 1 a 3 pontos são ações frequentes; em seguida, o separador; a seguir, menos usados.
Destrutivos - no final, marcados com cor/ícone (e frequentemente através de confirmação/undo).
Enunciados - Verbo + objeto (Adicionar aos favoritos, Copiar ID).
A editora só ≠ um ícone: ícone - amplificador, não substituição de texto.

4) Agrupamento e condição

Separadores para blocos lógicos (visualização, edição, admins, perigosos).
Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.
Não mostramos os que não estão disponíveis por papel se isso é confuso; alternativa - mostramos como 'disabled' com uma dica de causa.

5) Disponibilidade (A11y)

Contêiner: 'role =' menu ', elementos:' role = 'menuitem '/' menuitemcheckbox '/' menuitemradio'.
Roving tabindex: único' tabindex =» 0» no item atual, o restante' -1 '.
Setas de ↑↓ - movimento, →/← - entrada/saída do submendo. Enter/Space - Ativação, Esc - Fechar.
Typeahead: imprimir a primeira letra leva o foco para o item.
O anel de foco é visível; contraste de texto e ícone ≥ AA.
Para um ícone-botão, use "ária-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 "> Open </li>
<li role = "menuitem"> Copy link </li>
<li role = "menuitemcheckbox" aria-checked =" true"> Favorites </li>
<li role = "menuitem" data-danger = "true "> Delete </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) Posicionamento e performance

Abra o menu na origem (clique-ponto/ícone), deslize 4-8 px; acompanhe as bordas da tela (flip/shift).
Portal/camada acima ('z-index') com a captura do clique fora.
Renderize preguiçosamente, refogue a lista em menus longos (a virtualização não é necessária, mas evite centenas de itens).
Apenas 'opacity/trans' animação, com duração de 140-200 ms (out mais rápido: 100-160 ms).
Abra por 'ArrowRight' e hover com 80-120 ms de atraso (anti-flicker).

7) Pattern móveis

Long-press com haptica; Um tempo de 450 £100 ms.
Bottom sheet como uma forma de menu contextual (thumb-reachable).
As ações Swipe nas listas são «arquivo/favoritos» à esquerda e «remover» à direita (confirmação/undo).
Zonas de clique ≥ 44 x 44, assinaturas curtas, ícones 20-24 px.

8) Confirmações, undo e segurança

Ações destrutivas: ou segunda confirmação (modal/confirm pattern) ou undo 5-10 s.
Financeiro/risco - através de um claro confirm com contexto de repercussão.
Mostre a razão de 'disabled' ('Direitos insuficientes', 'Limites atingidos').

9) Ação rápida sem menus

Os shortcats inline na linha (ícones «», «», «⋯»).
Hover-reveal (desctop): exibe as ações de orientação, mas também deixa um desencadeador explícito.
Command palette: pesquisa de ação, teclas de dica («⌘S», «Ctrl + Enter»).

10) Copiatagem e ícones

Verbo + objeto, 2-3 palavras.
Comece com a ação («Remover gravação»...), não com a substantiva («Remover gravação»).
Ícones de um conjunto único; Use os mesmos ícones para fazer a mesma coisa em todo o produto.
Dicas de explicação ('title '/tooltip) para pontos ambíguos.

11) Telemetria e experiências

CTR por item, mediana de tempo de abertura a clique, frequência de separação/undo.
Número de misclick 'ov (destrutivo → cancelado).
A/B: ordem e agrupamento de itens, a presença de shortcats rápidos na lista.
Logs de itens «invisíveis» (ninguém usa) - candidatos para remoção/transferência.

12) Sistema de design de tokens (exemplo)

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 de componentes

Cartões/azulejos: ícone '⋯' no canto superior direito; no hover - mostra-se, e no tanque - é sempre visível.
Linhas da tabela: '⋯' na última coluna; A seleção múltipla é um painel de ações de lote superior/inferior.
Listas de bate-papos/notificações: swipe-action (arquivo/lido/removido) com undo.
Galerias de mídia: longo modo → multiversão + painel de ação inferior.

14) Especificidades iGaming

Taxa rápida (quick bet): o menu contextual do coeficiente é «Colocar X», «Adicionar ao cupom», «Subscrever para alterar o coeficiente». A confirmação/undo é obrigatória.
Favoritos/subscrição: «Adicionar provedor/jogo aos favoritos», «Inscrever-se no torneio».
Armazenamento em dinheiro com confirmação inline e valor atual; disponível apenas quando o mercado estiver disponível.
«Reclamar», «Bloquear bate-papo» - seguro, visível pelo papel.
Jogo responsável: «Definir limite», «Pausa 24h» - sem cores agressivas, com uma descrição clara das consequências.

15) Anti-pattern

As ações críticas estão escondidas apenas no menu contextual.
Itens sem texto (ícones), especialmente nas listas.
Fechando aleatoriamente para a saída do cursor durante a transição para o submendo (sem atraso/corredor).
O menu sobrepõe o item de origem ou sai pela tela (sem flip/shift).
Destrutivos sem confirmação/undo.
Direitos não óbvios (o parágrafo desaparece sem explicação).

16) QA-folha de cheque

Disponibilidade

• 'role =' menu '/' menuitem 'são corretos, roving tabindex e as setas funcionam.
• Esc fecha o menu e o foco volta para a origem.
• O contraste e os anéis de foco correspondem a AA.

Comportamento

• A ordem dos pontos reflete a frequência e o risco; Destrutiva lá em baixo.
• Posicionamento leva em conta bordas (flip/shift); animações rápidas (≤ 200 ms).
• O substitutivo é aberto pelo ArrowRight e não «tremer» (hover-intent 80-120 ms).

Celular

• Long-press com haptica; bottom-sheet é confortável com o polegar.
• As ações Swipe têm undo; zonas de clique ≥ 44 x 44.

Segurança

• Confirmar/undo para ações perigosas; as razões do disabled são claras.
• Não há vazamento de dados privados em dicas/editoras.

Métricas

• Tira CTR/tempo antes do clique; misclick/undo são monitores.

17) Implementação: abertura/encerramento e clique-fora

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) Documentação em design

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.
Tokens de tamanho/altura de linha/raio/animação.
Guidas de disponibilidade (ARIA, teclado, typeahead).
«Do/Don 't», com exemplos de agrupamento, posicionamento e confirmação.

Resumo curto

Menus contextuais e acções rápidas aceleram o funcionamento se forem previsíveis, acessíveis e seguros: dois caminhos de chamada, selos claros com ícones, agrupamento inteligente, confirmação/undo para risco, navegação correta e posicionamento claro. Fixe os tokens e patters no sistema de design - e os usuários agirão rapidamente sem medo de errar.