Kontekst menyuları və sürətli hərəkətlər

1) Təyinatı və tətbiq sahəsi

• Obyekt üzərində lokal hərəkətlər (kart, cədvəl sətri, əmsal).
• Seçim üzərində paket hərəkətləri.
• Gizli, lakin kritik olmayan variantlar (ikinci dərəcəli).
• Qayda: Kritik və ilkin hərəkətlər yalnız kontekstli menyuda gizlədilməməlidir.

2) Triggers və variantları

Right-click/Shift + F10/Menu key - klassik kontekstdir.
Icon button (kebab '⋮', meatballs '...', context) - taç/masaüstü üçün universal.
Long-press (400-600 ms) - mobil right-click ekvivalenti.
Command palet (, «P/Ctrl + K») - axtarış ilə qlobal sürətli komandalar.
Swipe-reveal (iOS/Android siyahıları) - bir sıra sürətli şortkatlar açır.

Tövsiyə: ən azı iki çağırış yolu təmin edin (ikon + kontekst klik/klaviş).

3) Məzmun və prioritet

İlk 1-3 bənd - tez-tez hərəkətlər; sonra ayırıcı; bundan sonra - az istifadə olunur.
Dağıdıcı - sonunda rəng/ikona ilə işarələnir (və tez-tez - təsdiq/undo vasitəsilə).
Formulalar - feil + obyekt («Favoritlərə əlavə et», «Şəxsiyyəti kopyala»).
Etiket yalnız simvol ≠: simvol - gücləndirici, mətn əvəz deyil.

4) Qrup və vəziyyət

Məntiq blokları üçün ayırıcılar (baxış, redaktə, admin, təhlükəli).
Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.
Bu qarışdırırsa, rolda əlçatmazları göstərmirik; alternativ - «disabled» səbəbi ilə göstərilir.

5) Mövcudluq (A11y)

Konteyner: 'role = «menu»', elementlər: 'role = «menuitem» '/' menuitemcheckbox '/' menuitemradio'.
Roving tabindex: tək 'tabindex = "0' cari elementdə, qalanları '-1'.
Oxlar ↑ ↓ - yerdəyişmə, →/← - giriş/çıxış. Enter/Space - aktivləşdirmə, Esc - bağlayın.
Typeahead: Birinci hərfin çapı fokusu nöqtəyə köçürür.
Focus ring görünür; mətn və nişanlar kontrast ≥ AA.
Nişan düyməsi üçün 'aria-haspopup =' menu 'və' aria-expanded 'istifadə edin.

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) Mövqeləşdirmə və performans

Mənbə menyusunu açın (klik/nişan), 4-8 px sürüşmə; ekranın kənarlarını izləyin (flip/shift).
Portal/üst qat ('z-index') klik tutma ilə.
Tembel render edin, siyahını uzun menyularda təkrar edin (virtuallaşdırma lazım deyil, ancaq yüzlərlə nöqtədən qaçın).
Animasiya yalnız 'opacity/transform', uzunluğu 140-200 ms (daha sürətli: 100-160 ms).
'ArrowRight' və hover-i 80-120 ms gecikmə ilə açın (anti-flicker).

7) Mobil nümunələr

Xaptika ilə uzun mətbuat; zaman 450 ± 100 ms.
Subtom sheet kontekstli menyu forması kimi (thumb-reachable).
Swipe actions siyahılarda: solda - «arxiv/favoritlər», sağda - «silmək» (təsdiq/undo).
Klik zonaları ≥ 44 × 44, imzalar qısa, nişanlar 20-24 px.

8) Təsdiq, undo və təhlükəsizlik

Dağıdıcı hərəkətlər: ya ikinci təsdiq (modal/confirm pattern), ya da undo 5-10 s.
Maliyyə/risk - nəticələr kontekstində açıq confirm vasitəsilə.
Səbəbini göstərin 'disabled' («Yetərli deyil», «Limit əldə edildi»).

9) Menyu olmadan sürətli hərəkətlər

Sətirdə inline-şortkatlar («», «», «⋯» nişanları).
Hover-reveal (masaüstü): istiqamətləndirmə hərəkətlərini göstərmək, lakin açıq bir tetikleyici buraxın.
Command palette: hərəkətlərə görə axtarış, ipuçlarında qaynar düymələr (« S», «Ctrl + Enter»).

10) Kopyalama və nişanlar

Feil + obyekt, 2-3 söz.
Bir fəaliyyətlə başlayın («Yazını sil»...), bir isimdən deyil («Yazını sil»).
Tək dəstdən nişanlar; bütün məhsulda eyni hərəkətlər üçün eyni piktogramlardan istifadə edin.
Müxtəlif məqamlar üçün izah ipuçları ('title '/tooltip).

11) Telemetriya və təcrübələr

CTR maddələr, median vaxt açmaq üçün klik, ləğv tezliyi/undo.
misclick 's sayı (dağıdıcı → ləğv).
A/B: maddə sırası və qruplaşdırılması, siyahıda sürətli şortkatların olması.
«Görünməz» maddələrin qeydləri (heç kim istifadə etmir) - silmək/köçürmək üçün namizədlər.

12) Dizayn sistemi tokenləri (nümunə)

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) Komponentlərə görə nümunələr

Kartlar/plitələr: sağ yuxarı küncdə '⋯' simvolu; hover - görünür, taç - həmişə görünür.
Cədvəlin sətirləri: son sütunda '⋯'; çox seçildikdə - paket paneli yuxarıdan/aşağıdan.
Chat/bildiriş siyahıları: undo ilə swipe-actions (arxiv/oxundu/silindi).
Media qalereyaları: uzun tap → multi-seçmə rejimi + alt hərəkət paneli.

14) iGaming xüsusiyyətləri

Sürətli bahis (quick bet): kontekstdə əmsalın menyusunda - «X qoyun», «Kupona əlavə et», «Əmsalın dəyişdirilməsi üçün abunə ol». Təsdiq/undo tələb olunur.
Favoritlər/abunələr: «Favoritlərə provayder/oyun əlavə et», «Turnirə abunə ol».
Cash-out: online təsdiqi və cari məbləği ilə; yalnız bazar statusunda mövcuddur.
Moderasiya/Reports: «Şikayət et», «Söhbəti blokla» - təhlükəsiz, rollarda görünür.
Məsuliyyətli oyun: «Limit təyin et», «24 saat fasilə» - aqressiv rənglər olmadan, nəticələrinin aydın təsviri ilə.

15) Anti-nümunələr

Kritik hərəkətlər yalnız kontekstli menyuda gizlədilir.
Mətnsiz maddələr (yalnız nişanlar), xüsusilə siyahılarda.
Alt menyuya keçərkən kursorun gedişi üçün təsadüfi bağlanması (gecikmə/dəhliz yoxdur).
Menyu element-mənbəni örtür və ya ekranı tərk edir (flip/shift yoxdur).
Təsdiq olmadan dağıdıcı/undo.
Qeyri-aşkar hüquqlar (maddə izahat olmadan itir).

16) QA-çek siyahısı

Mövcudluq

• 'role = «menu «'/' menuitem 'düzdür, roving tabindex və oxlar işləyir.
• Esc menyunu bağlayır, fokus mənbəyə qayıdır.
• Kontrast və fokus-ring AA uyğun gəlir.

Davranış

• Maddələrin sırası tezliyi və riski əks etdirir; aşağı dağıdıcı.
• Yerləşdirmə kənarları nəzərə alır (flip/shift); animasiya sürətli (≤ 200 ms).
• Alt menyu ArrowRight ilə açılır və «titrəmir» (hover-intent 80-120 ms).

Mobil

• Xaptik ilə uzun mətbuat; bottom-sheet baş barmaq rahatdır.
• Swipe-actions undo var; klik zonaları ≥ 44 × 44.

Təhlükəsizlik

• Təhlükəli hərəkətlər üçün təsdiq/undo; disabled səbəbləri aydındır.
• İpuçlarında/etiketlərində heç bir şəxsi məlumat sızması yoxdur.

Metrika

• CTR/click əvvəl vaxt çıxarılır; misclick/undo monitorinq.

17) Realizasiya: açma/bağlama və klik-off

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) Dizayn sistemində sənədləşmə

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.
Ölçü/sətir hündürlüyü/radius/animasiya işarələri.
Əlçatanlığa görə qaydalar (ARIA, klaviatura, typeahead).
Qruplaşdırma, yerləşdirmə və təsdiqləmə nümunələri ilə «Do/Don 't».

Qısa xülasə

Kontekst menyular və sürətli hərəkətlər, proqnozlaşdırıla bilən, əlçatan və təhlükəsizdirsə, işi sürətləndirir: iki çağırış yolu, nişanlı aydın etiketlər, ağlabatan qruplaşma, risk üçün/undo təsdiqi, düzgün klaviatura naviqasiyası və aydın yerləşdirmə. Dizayn sistemindəki tokenləri və nümunələri düzəldin - və istifadəçilər səhv etməkdən qorxmadan tez hərəkət edəcəklər.