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">Открыть</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) 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 breve

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.