Контексттик меню жана тез иш-аракеттер

1) Максаты жана колдонуу чөйрөсү

• Объектке карата локалдык аракеттер (карточка, таблицанын сабы, коэффициент).
• Тандоо боюнча пакеттик аракеттер.
• Жашыруун, бирок критикалык эмес параметрлери (орто).
• Эреже: критикалык жана негизги иш-аракеттер гана контексттик менюда жашырып жок.

2) Триггерлер жана параметрлери

Right-click/Shift + F10/Menu key - классикалык контексттик.
Icon button (kebab '⋮', meatballs '...', context) - тач/десктоп үчүн универсалдуу.
Long-press (400-600 ms) - мобилдик барабар right-click.
Command Palette - издөө менен глобалдык тез команда.
Swipe-reveal (IOS/Android тизмелери) - тез shortcats бир катар ачат.

Сунуш: Чакыруунун жок дегенде эки жолун камсыз кылуу (сөлөкөт + контексттик чыкылдатуу/баскычы).

3) Мазмуну жана артыкчылыгы

Биринчи 1-3-пункттар - тез-тез аракеттер; андан кийин бөлгүч; мындан ары - аз колдонулат.
Деструктивдүү - аягында, түс/сөлөкөт менен белгиленген (жана көп учурда - ырастоо/undo аркылуу).
Формулировкалар - этиш + объект ("Тандалгандарга кошуу", "ID көчүрүп алуу").
Белги бир гана сөлөкөт ≠: сөлөкөт - күчөткүч, текстти алмаштыруу эмес.

4) Топтоо жана абалы

Логикалык блоктор үчүн бөлгүчтөр (көрүү, түзөтүү, башкаруу, коркунучтуу).
Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.
Эгер бул чаташтырса, ролу боюнча жеткиликсиз көрсөтпөйбүз; альтернатива - кантип "disabled" себебин көрсөтүү.

5) Жеткиликтүүлүк (A11y)

Контейнер: 'role = "menu"', элементтер: 'role = "menuitem" '/' menuitemcheckbox '/' menuitemradio'.
Roving tabindex: жалгыз' tabindex =" 0"' учурдагы элемент боюнча, калган '-1'.
Жебелер ↑ ↓ - жылыш, →/← - кирүү/чыгуу. Enter/Space - жандандыруу, Esc - жабуу.
Typeahead: биринчи тамганы басып чыгаруу пунктка багытталган.
Focus шакек көрүнүп турат; контраст текст жана иконалар ≥ AA.
Сөлөкөт баскычы үчүн 'aria-haspopup =' menu 'жана' 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) жайгаштыруу жана аткаруу

Булак менюсун ачуу (click-пункт/сөлөкөт), 4-8 px өзгөртүү; экрандын четине көз салуу (flip/shift).
Портал/үстүнкү катмары ('z-index') чыкылдатуу кармоо менен.
жалкоо Render, узун менюсунда тизмесин кайра (Virtualization кереги жок, бирок жүздөгөн пунктка качуу).
Анимация гана 'opacity/transform', узактыгы 140-200 мс (out тезирээк: 100-160 мс).
'ArrowRight' жана hover боюнча 80-120 ms кечигүү менен алмаштыруу (анти-flicker).

7) Мобилдик үлгүлөрү

хаптика менен Long-press; убакыт 450 ± 100 ms.
контексттик менюсунун бир түрү катары Bottom sheet (thumb-reachable).
Swipe actions тизмелеринде: сол - "архив/тандалган", оң - "алып салуу" (ырастоо/undo).
Click зоналары ≥ 44 × 44, кол тамгалар кыска, иконалар 20-24 px.

8) ырастоо, undo жана коопсуздук

Деструктивдүү иш-аракеттер: же экинчи ырастоо (modal/confirm pattern), же undo 5-10 б.
Каржылык/тобокелдик - кесепеттери контекстинде ачык confirm аркылуу.
"disabled" себебин көрсөтүңүз ("Жетишсиз укуктар", "Лимитке жетишилди").

9) менюсуз тез иш-аракеттер

Линиядагы Inline-шорткаттар (иконалар "", "", "⋯").
Hover-reveal (desktop): көрсөтүлгөндө иш-аракеттерди көрсөтүү, бирок ачык триггер калтыруу.
Command palette: иш-аракет боюнча издөө, ысык баскычтар (" S", "Ctrl + Enter").

10) Копирайтинг жана иконалар

этиш + объект, 2-3 сөз.
иш-аракет менен баштоо ("Жазууну өчүрүү"...), аты менен эмес ("Жазууну өчүрүү").
Бир топтомдон иконалар; продукт боюнча бирдей иш-аракеттер үчүн бирдей пиктограммаларды колдонуңуз.
Түшүнүктөр ('title '/tooltip) түшүнүксүз пункттар үчүн.

11) Телеметрия жана эксперименттер

CTR пункттары боюнча, медиа убакыт ачылышынан чыкылдатуу ,/undo жыштыгы.
misclick's саны (кыйратуучу → жокко чыгарылган).
A/B: тартиби жана пункттарын топтоо, тизме тез кыска болушу.
Логи "көзгө көрүнбөгөн" пункттары (эч ким колдонот) - алып салуу/өткөрүп берүү үчүн талапкерлер.

12) Дизайн системасы токендери (мисал)

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) компоненттери боюнча үлгүлөрү

Карталар/плиткалар: жогорку оң бурчунда '⋯' белги; hover боюнча - көрсөтөт, tach боюнча - ар дайым көрүнүп турат.
Таблицанын саптары: '⋯' акыркы тилкеде; көп бөлгөндө - үстүңкү/астыңкы пакеттик иш-аракеттер панели.
Чат/кабарлоо тизмелери: swipe-actions (архив/окулган/жок) менен undo.
Медиа галереялар: узун топ → көп тандоо режими + төмөнкү иш-аракет панели.

14) iGaming өзгөчөлүктөрү

Тез коюм (quick bet): контексттик менюда коэффициентти - "X коюм" (алдын ала түзөтүүлөр), "Купонго кошуу", "Коэффициентти өзгөртүүгө жазылуу". Ырастоо/undo милдеттүү.
Тандалган/жазылуу: "Тандалгандарга провайдер/оюн кошуу", "Турнирге жазылуу".
Кэш-аут: инлайн тастыктоо жана учурдагы сумма менен; рынок статусунда гана жеткиликтүү.
Модерация/репортаждар: "Даттануу", "Чатты бөгөттөө" - коопсуз, ролдордон көрүнүп турат.
Жооптуу оюн: "Лимитти белгилөө", "24 саат тыныгуу" - агрессивдүү түстөр жок, кесепеттерин так сүрөттөө менен.

15) Анти-үлгүлөрү

Критикалык аракеттер контексттик менюда гана катылган.
Текстсиз пункттар (бир гана иконалар), өзгөчө тизмелерде.
Подменага өткөндө курсордун кетиши үчүн кокусунан жабуу (кечигүү/коридор жок).
Меню элемент-булагын жаап же экрандан чыгып кетет (flip/shift жок).
Деструктивдүү ырастоо жок/undo.
Айкын эмес укуктар (пункт түшүндүрмөсүз жоголот).

16) QA-чек тизмеси

Жеткиликтүүлүк

• 'role = "menu "'/' menuitem 'туура, roving tabindex жана жебелер иштейт.
• Esc менюну жабат, фокус булакка кайтып келет.
• Контраст жана фокус шакек AA ылайык келет.

Жүрүм-турум

• Пункттардын тартиби жыштыкты жана тобокелдикти чагылдырат; төмөндө кыйратуучу.
• Жайгаштыруу четин эске алат (flip/shift); тез анимация (≤ 200 ms).
• Подмена ArrowRight аркылуу ачылат жана "калтырабайт" (hover-intent 80-120 ms).

Мобилдик

• хаптика менен Long-press; bottom-sheet баш бармак менен ыңгайлуу.
• Swipe-actions undo бар; басуу зоналары ≥ 44 × 44.

Коопсуздук

• коркунучтуу иш-аракеттер үчүн ырастоо/undo; disabled себептери түшүнүктүү.
• Эч кандай жашыруун маалымат агып/белги.

Метрика

• CTR/убакыт чыкылдатуу чейин алынып салынат; misclick/undo мониторинг.

17) ишке ашыруу: ачуу/жабуу жана чыкылдатуу

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) Дизайн системасында документтер

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.
Өлчөмү/сызык бийиктиги/радиус/анимация белгилери.
Гайддар жеткиликтүүлүгү боюнча (ARIA, клавиатура, typeahead).
"Do/Don 't" топтоо, жайгаштыруу жана тастыктоо мисалдары менен.

Кыскача резюме

Контексттик менюлар жана тез иш-аракеттер, эгерде алар алдын ала айтууга болот, жеткиликтүү жана коопсуз болсо, ишти тездетет: эки чакыруу жолу, иконалар менен так этикеткалар, акылга сыярлык топтоо, тобокелдик үчүн/undo ырастоо, туура клавиатура навигациясы жана так жайгаштыруу. Дизайн системасындагы токендерди жана үлгүлөрдү бекитиңиз - жана колдонуучулар ката кетирүүдөн коркпостон тез аракеттенишет.