Menu kontekstowe i szybkie działania

1) Cel i zakres

• Lokalne działania na obiekcie (karta, wiersz tabeli, współczynnik).
• Akcje wsadowe przy wyborze.
• Ukryte, ale nie krytyczne opcje (wtórne).
• Zasada: nie ukrywać krytycznych i podstawowych działań tylko w menu kontekstowym.

2) Spusty i warianty

Kliknij prawym przyciskiem myszy/Shift + klucz F10/Menu - klasyczny kontekst.
Przycisk ikony (kebab '⋮', klopsiki '... ', kontekst) - uniwersalny do dotyku/pulpitu.
Long-press (400-600 ms) jest mobilnym odpowiednikiem kliknięcia prawym przyciskiem myszy.
Paleta poleceń (⇧⌘P/Ctrl + K) - globalne szybkie polecenia z wyszukiwaniem.
Swipe-reveal (listy iOS/Androida) - otwiera szereg szybkich skrótów.

Zalecenie: podać co najmniej dwie metody wywołania (ikona + kliknięcie kontekstowe/klucz).

3) Treść i priorytet

Pierwsze 1-3 punkty to częste działania; następnie separator; dalej - rzadziej używane.
Destrukcyjna - na końcu, oznaczona kolorem/ikoną (i często - poprzez potwierdzenie/cofnięcie).
Brzmienie - czasownik + obiekt („Dodaj do ulubionych”, „Kopiuj ID”).
Etykieta jest tylko ikoną: ikona jest wzmacniaczem, a nie zamiennikiem tekstu.

4) Ugrupowanie i status

Delimitery dla bloków logicznych (widok, edycja, administrator, niebezpieczne).
Состовний: „disabled”, „checked” („menuitemcheckbox ”/„ menuitemradio”), „destructive”.
Nie pokazuj roli niedostępnej, jeśli jest to mylące; alternatywnie - pokaż jako „niepełnosprawny” z powodu wskazówki.

5) Dostępność (A11y)

Kontener: 'role = „menu”', elementy: 'role =' menuitem '/' menuitemcheckbox '/' menuitemradio '.
Indeks roving: Jedyny 'tabindex =' 0 'na bieżącym elemencie, reszta' -1 '.
strzałki - ruch, →/← - wejście/wyjście z podmenu. Enter/Space - aktywacja, Esc - close.
Typeahead: Drukowanie pierwszej litery przesunięcia skupić się na punkcie.
Pierścień ostrości jest widoczny; kontrast tekstu i ikon ≥ AA.
Dla ikony przycisku użyj 'aria-haspopup =' menu '' i '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) Pozycjonowanie i wydajność

Otwórz menu u źródła (click-point/icon), shift 4-8 px; oglądać krawędzie ekranu (flip/shift).
Portal/warstwa nad ('z-index') z kliknięciem łapanie.
Render leniwy, recyklingu listy w długim menu (nie jest potrzebna wirtualizacja, ale uniknąć setek przedmiotów).
Animacje tylko „zmętnienie/przekształcenie”, czas trwania 140-200 ms (szybciej: 100-160 ms).
Otwórz podmenu przez 'ArrowRight' i zawisz z opóźnieniem 80-120 ms (anty-migotanie).

7) Wzory mobilne

Długie prasy z haptics; czasy 450 ± 100 ms.
Dolny arkusz jako forma menu kontekstowego (kciuk-osiągalny).
Przesuń akcje na listach: po lewej - „archiwum/ulubione”, po prawej - „usuń” (potwierdzenie/cofnięcie).
Kliknij strefy ≥ 44 × 44, krótkie podpisy, ikony 20-24 px.

8) Potwierdzenia, cofnięcie i bezpieczeństwo

Działania destrukcyjne: drugie potwierdzenie (modal/confirm pattern) lub cofnięcie 5-10 s.
Finansowe/ryzyko - poprzez wyraźne potwierdzenie w kontekście konsekwencji.
Pokaż powód 'wyłączony' („Niedostateczne prawa”, „Osiągnięty limit”).

9) Szybkie działania bez menu

Skróty w linii (ikony "," "," ⋯ ").
Hover-reveal (pulpit): pokaż działania podczas zawisania, ale pozostaw wyraźny wyzwalacz.
Paleta poleceń: wyszukiwanie według akcji, hotkeys w końcówkach narzędzi („⌘S”, „Ctrl + Enter”).

10) Kopiowanie i ikony

Czasownik + obiekt, 2-3 słowa.
Zacznij od akcji („Usuń wpis”...), a nie rzeczownika („Usuń wpis”).
Ikony z jednego zestawu; Użyj tych samych ikon dla tych samych działań w całym produkcie.
Wskazówki wyjaśniające („tytuł ”/końcówka narzędzi) dla elementów niejednoznacznych.

11) Telemetria i eksperymenty

CTR według pozycji, mediana czasu od otwarcia do kliknięcia, szybkość anulowania/cofnięcia.
Liczba błędów (destrukcyjne → anulowane).
A/B: zamówienie i grupowanie przedmiotów, obecność szybkich skrótów na liście.
Dzienniki pozycji „niewidzialnych” (nikt nie używa) - kandydaci do usunięcia/przeniesienia.

12) Żetony systemu projektowania (przykład)

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) Wzory elementów

Karty/płytki: ikona „⋯” w prawym górnym rogu; na zawisku - pokazane, w dotyku - zawsze widoczne.
wiersze tabeli: „⋯” w ostatniej kolumnie; w przypadku wielokrotnego wyboru - panel akcji wsadowych z góry/dołu.
Listy rozmów/powiadomień: swipe-actions (archiwum/read/delete) z cofnięciem.
Galerie multimedialne: długi kran → tryb multi-select + panel akcji dolnej.

14) Specyfika iGaming

szybki zakład: w menu kontekstowym współczynnika - "Put X" (wstępne ustawienia), "Dodaj do kuponu", "Subskrybuj, aby zmienić współczynnik. "Wymagane jest potwierdzenie/cofnięcie.
Ulubione/subskrypcje: „Dodaj dostawcę/grę do ulubionych”, „Subskrybuj turniej”.
Wypłata: z potwierdzeniem inline i bieżącą kwotą; dostępny tylko ze statusem rynkowym.
Moderacja/raporty: „Narzekaj”, „Block chat” - bezpieczne, widoczne przez rolę.
Odpowiedzialna gra: „Ustaw limit”, „Pauza 24h” - bez agresywnych kolorów, z jasnym opisem konsekwencji.

15) Anty-wzory

Działania krytyczne są ukryte tylko w menu kontekstowym.
Pozycje bez tekstu (tylko ikony), zwłaszcza na listach.
Przypadkowe zamknięcie kursora podczas przełączania do podmenu (brak opóźnienia/korytarza).
Menu nakłada się na element źródłowy lub idzie za ekran (bez flip/shift).
Niszczyciel bez potwierdzenia/cofnięcia.
Prawa niewyraźne (klauzula znika bez wyjaśnienia).

16) Lista kontrolna QA

Dostępność

• 'role = „menu „'/' menuitem 'są poprawne, roving tabindex i strzałki działają.
• Esc zamyka menu, focus wraca do źródła.
• Pierścienie kontrastu i ostrości odpowiadają AA.

Zachowanie

• Kolejność pozycji odzwierciedla częstotliwość i ryzyko; niszczące na dole.
• Pozycjonowanie uwzględnia krawędzie (flip/shift); szybkie animacje (≤ 200 ms).
• Podmenu jest otwierane przez ArrowRight i nie „drżeć” (hover-intent 80-120 ms).

Telefon komórkowy

• Długie prasy z haptics; dolna blacha jest wygodna z kciukiem.
• Działania typu swipe cofnęły się; kliknij obszary ≥ 44 × 44.

Bezpieczeństwo

• Potwierdzenie/cofnięcie niebezpiecznych działań; przyczyny niepełnosprawnych są jasne.
• Brak wycieku danych prywatnych w podpowiedziach/etykietach.

Mierniki

• CTR/czas do kliknięcia jest usuwany; misclick/cofnij są monitorowane.

17) Wdrożenie: otwórz/zamknij i kliknij

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) Dokumentacja w systemie projektowym

Кобонента: 'Menu', 'MZ', 'Podmenu', 'BottomSheet', 'SwipeAction', 'CommandPalette'.
Wymiar/wysokość wiersza/promień/żetony animacyjne.
Przewodniki dostępności (ARIA, klawiatura, typeahead).
„Do/Don” z przykładami grupowania, pozycjonowania i potwierdzania.

Krótkie podsumowanie

Menu kontekstowe i szybkie działania przyspieszają pracę, jeśli są one przewidywalne, dostępne i bezpieczne: dwie ścieżki wywoławcze, wyraźne etykiety z ikonami, rozsądne grupowanie, potwierdzenie/cofnięcie ryzyka, prawidłowa nawigacja klawiatury i wyraźne pozycjonowanie. Uchwycić żetony i wzory w systemie projektowania - a użytkownicy będą działać szybko bez obawy o popełnienie błędu.