Kontekst menyular va tezkor harakatlar

1) Vazifasi va qo’llanish sohasi

• Obyektga nisbatan lokal harakatlar (kartochka, jadvalning satri, koeffitsiyent).
• Tanlash boʻyicha paketli harakatlar.
• Yashirin, ammo tanqidiy boʻlmagan variantlar.
• Qoida: tanqidiy va birlamchi harakatlarni faqat kontekstli menyuda yashirmaslik.

2) Triggerlar va variantlar

Right-click/Shift + F10/Menu key - klassik kontekst.
Icon button (kebab’⋮’, meatballs’...’, context) - tach/desktop uchun universal.
Long-press (400-600 ms) - right-click mobil ekvivalenti.
Command palette - global tezkor qidiruv jamoalari.
Swipe-reveal (iOS/Android ro’yxatlari) - bir qator tezkor shortkatlarni ochadi.

Tavsiya: kamida ikkita chaqiruv usulini taqdim eting (ikona + kontekst bosish/tugma).

3) Mazmuni va ustuvorligi

Birinchi 1-3-bandlar - tez-tez sodir bo’ladigan harakatlar; keyin ajratuvchi; bundan buyon matnda kamdan-kam foydalaniladiganlar deb yuritiladi.
Buzg’unchi - oxirida, rang/ikona bilan belgilanadi (va ko’pincha - tasdiqlash/undo orqali).
Formulalar feʼl + obʼekt («Tanlanganlarga qoʻshish», «ID nusxa olish»).
Yorliq ≠ faqat piktogramma: piktogramma - kuchaytirgich, matn almashtirilmaydi.

4) Guruhlash va holat

Mantiqiy bloklar uchun ajratuvchilar (ko’rish, tahrir qilish, ma’muriy, xavfli).
Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.
Agar bu noto’g’ri bo’lsa, rol bo’yicha mavjud bo’lmaganlarni ko’rsatmaymiz; muqobil - sababini koʻrsatgan holda «disabled» deb koʻrsating.

5) Foydalanish imkoniyati (A11y)

Konteyner:’role = «menu»’, elementlar:’role = «menuitem» ’/’ menuitemcheckbox ’/’ menuitemradio’.
Roving tabindex: joriy elementda yagona’tabindex = "0’, qolganlari’-1’.
O’qlar ↑ ↓ - harakatlanish, →/← - kirish/chiqish. Enter/Space - faollashtirish, Esc - yopish.
Typeahead: birinchi harfni bosib chiqarish fokusni bandga koʻchiradi.
Fokus halqa koʻrinadi; matn va piktogramma kontrastlari ≥ AA.
Tugma ikonasi uchun’aria-haspopup =’menu’va’aria-expanded’dan foydalaning.

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) Pozitsiyalash va spektakl

Portal/ustki qatlam (’z-index’)

Manba menyusini oching (klik/piktogramma), 4-8 px o’zgarishi; ekranning chetlarini kuzatib boring (flip/shift).
Dangasa render qiling, ro’yxatni uzoq menyuda qayta aylantiring (virtualizatsiya kerak emas, lekin yuzlab bandlardan qoching).
Animatsiyalar faqat’opacity/transform’, davomiyligi 140-200 ms (out tezroq: 100-160 ms).
’ArrowRight’ va’hover’bo’yicha 80-120 ms (anti-flicker) kechikish bilan almashtirishni oching.

7) Mobil patternlar

xaptika bilan Long-press; tayming 450 ± 100 ms.
Bottom sheet kontekstli menyu shakli sifatida (thumb-reachable).
Swipe actions roʻyxatida: chapda - «arxiv/tanlangan», oʻngda - «oʻchirish» (tasdiqlash/undo).
Bosish zonalari ≥ 44 × 44, imzolar qisqacha, piktogrammalar 20-24 px.

8) Tasdiqlash, undo va xavfsizlik

Buzg’unchi harakatlar: yoki ikkinchi tasdig’i (modal/confirm pattern), yoki undo 5-10 so’m.
Moliyaviy/tavakkalchilik - oqibatlar kontekstiga ega bo’lgan aniq confirm orqali.
Sababini koʻrsating’disabled’(«Yetarli huquqlar yoʻq», «Chegaraga erishilgan»).

9) Menyusiz tezkor harakatlar

Inline-shortkatlar qatorida («», «», «⋯» ikonalari).
Hover-reveal (ish stoli): harakatlarni koʻrsatish, lekin aniq trigger qoldirish.
Command palette: amallar boʻyicha qidirish, maslahatlardagi issiq tugmalar (« S», «Ctrl + Enter»).

10) Kopirayting va ikonkalar

Feʼl + obyekt, 2-3 so’z.
«Yozuvni oʻchirish»... bilan boshlang.
Bitta to’plamdan iborat ikonkalar; mahsulotda bir xil harakatlar uchun bir xil piktogrammalardan foydalaning.
Noaniq bandlar uchun tushuntiruvchi maslahatlar (’title ’/tooltip).

11) Telemetriya va eksperimentlar

Band boʻyicha CTR, ochilish vaqtidan bosishgacha mediana, bekor qilish/undo chastotasi.
Misclick’lar soni (buzg’unchi → bekor qilingan).
A/B: bandlar tartibi va guruhlanishi, ro’yxatda tezkor shortkatlar mavjudligi.
Ko’rinmas bandlarning loglari (hech kim foydalanmaydi) - o’chirish/ko’chirish uchun nomzodlar.

12) Dizayn-tizim tokenlari (misol)

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) Komponentlar bo’yicha patternlar

Kartochkalar/plitkalar: yuqori o’ng burchagida’⋯’belgisi; hover - ko’rsatiladi, tach - har doim ko’rinadi.
Jadvalning so’nggi ustunidagi «⋯» satrlari; koʻp tanlanganda - yuqoridan/pastdan paketli harakatlar paneli.
Chat/xabarnomalar roʻyxati: swipe-actions (arxiv/oʻqilgan/oʻchirilgan) undo.
Media galereyalar: uzoq tap → multimedia + pastki panel.

14) iGaming xususiyatlari

Tezkor stavka (quick bet): koeffitsiyentning kontekstli menyusida - «X qo’yish» (oldindan tuzish), «Kuponga qo’shish», «Koeffitsiyentni o’zgartirishga obuna bo’lish». Tasdiqlash/undo majburiydir.
Tanlanganlar/obuna: «Provayder/oʻyinni tanlanganlarga qoʻshish», «Turnirga obuna boʻlish».
Kesh-aut: inline-tasdiqlash va joriy summa bilan; faqat bozor maqomida foydalanish mumkin.
Moderatsiya/reportsiyalar: «Shikoyat qilish», «Suhbatni blokirovka qilish» - xavfsiz, rollardan koʻrinadi.
Mas’uliyatli o’yin: «Limit belgilash», «24 soat pauza» - tajovuzkor ranglarsiz, oqibatlari aniq tasvirlangan.

15) Anti-patternlar

Tanqidiy harakatlar faqat kontekst menyusida yashiringan.
Matnsiz bandlar (bitta piktogramma), ayniqsa ro’yxatlarda.
Kursorni almashtirish paytida tasodifiy yopish (kechikish/koridor yo’q).
Menyu manba elementini yopadi yoki ekrandan chiqib ketadi (flip/shift yoʻq).
Tasdiqlanmagan/undo.
Aniq bo’lmagan huquqlar (band tushuntirishsiz yo’qoladi).

16) QA-chek-varaq

Foydalanish imkoniyati

• ’role = «menu «’/’ menuitem’toʻgʻri, roving tabindex va strelkalar ishlamoqda.
• Esc menyuni yopadi, fokus manbaga qaytadi.
• Kontrast va fokus halqa AA ga mos keladi.

Xatti-harakatlar

• Bandlar tartibi chastota va xavfni aks ettiradi; pastki qismida buzg’unchi.
• Joylashtirish chetlarni hisobga oladi (flip/shift); tezkor animatsiyalar (≤ 200 ms).
• Menyu ArrowRight orqali ochiladi va «titramaydi» (hover-intent 80-120 ms).

Mobil

• Xaptika bilan Long-press; bottom-sheet bosh barmog’i bilan qulay.
• Swipe-actions undo; 44 ≥ 44 × bosish zonalari.

Xavfsizlik

• Xavfli harakatlar uchun tasdiqlash/undo; disabled sabablari tushunarli.
• Maslahatlar/yorliqlarda shaxsiy maʼlumotlar sizib chiqmadi.

Metrika

• CTR/bosishdan oldingi vaqt olib tashlanadi; misclick/undo kuzatilmoqda.

17) Amalga oshirish: ochilishi/yopilishi va bosilishi

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-tizimdagi hujjatlar

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.
O’lcham/satr balandligi/radius/animatsiyalar tokenlari.
Gidlar (ARIA, klaviatura, typeahead).
guruhlash, joylashtirish va tasdiqlash misollari bilan «Do/Don’t».

Qisqacha xulosa

Kontekst menyular va tezkor harakatlar, agar ular oldindan aytib bo’ladigan, mavjud va xavfsiz bo’lsa, ishlashni tezlashtiradi: ikkita chaqiruv yo’li, ikonkali yorliqlar, oqilona guruhlash, xavfni tasdiqlash/undo, to’g’ri klaviatura navigatsiyasi va aniq joylashtirish. Token va patternlarni dizayn tizimiga o’rnating va foydalanuvchilar xato qilishdan qo’rqmasdan tez harakat qilishadi.