Мәтінмәндік мәзірлер мен жылдам әрекеттер

1) Мақсаты және қолдану аясы

• Объектіге қатысты жергілікті әрекеттер (карточка, кестенің жолы, коэффициент).
• Бөлектеу әрекеті.
• Жасырын, бірақ сыни емес опциялар (екінші дәрежелі).
• Ереже: сыни және бастапқы әрекеттерді тек контекстік мәзірде жасыруға болмайды.

2) Триггерлер және нұсқалар

Right-click/Shift + F10/Menu key - классикалық контекстік.
Icon button (kebab '⋮', meatballs '...', context) - тач/десктоп үшін әмбебап.
Long-press (400-600 мс) - right-click мобильді баламасы.
Command palette - іздеумен жаһандық жылдам командалар.
Swipe-reveal (iOS/Android тізімдері) - бірнеше жылдам шорткаттарды ашады.

Ұсыным: шақырудың кем дегенде екі тәсілін қамтамасыз етіңіз (иконка + контекстік басу/перне).

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: бірінші әріпті басып шығару назарды тармаққа аударады.
Фокус-сақина көрінеді; мәтін мен белгішелер контрасты ≥ 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) Позиционирование и перформанс

Мәзірді көзден ашыңыз (клик-нүкте/белгішесі), 4-8 px ауысу; экран шеттерін қадағалаңыз (flip/shift).
Портал/үстіңгі қабат ('z-index').
Жалқаулықпен рендерлеңіз, тізімді ұзын мәзірде қайталаңыз (виртуалдандыру қажет емес, бірақ жүздеген тармақтан аулақ болыңыз).
Анимациялар тек 'opacity/transform', ұзақтығы 140-200 мс (out тезірек: 100-160 мс).
'ArrowRight' және hover бойынша 80-120 мс кідіріспен (anti-flicker) ауысымды ашыңыз.

7) Мобильді үлгілер

қаптикамен Long-press; тайминг 450 ± 100 мс.
Мәтінмәндік мәзір пішіні ретінде (thumb-reachable).
Тізімдегі Swipe actions: сол жақта - «архив/таңдаулы», оң жақта - «жою» (растау/undo).
Басу аймағы ≥ 44 × 44, қолтаңбалар қысқа, иконалар 20-24 px.

8) Растау, undo және қауіпсіздік

Деструктивті әрекеттер: не екінші растау (modal/confirm pattern), не undo 5-10 сек.
Қаржылық/тәуекелдік - салдары бар айқын confirm арқылы.
«disabled» себебін көрсетіңіз («Құқықтар жеткіліксіз», «Лимитке қол жеткізілді»).

9) Мәзірсіз жылдам әрекеттер

Жолдағы inline-шортқаттар («», «», «⋯» иконалары).
Hover-reveal (десктоп): бағыттау әрекеттерін көрсету, бірақ анық триггерді де қалдыру.
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 - көрсетіледі, тач - әрқашан көрінеді.
Кестенің жолдары: '⋯' соңғы бағанада; көп таңдалғанда - үстіңгі/астыңғы топтық әрекеттер тақтасы.
Сөйлесу/хабарландыру тізімдері: swipe-actions (архив/оқылды/жойылды) undo.
Медиа-галереялар: ұзақ тап → мультивыбір режимі + төменгі әрекет тақтасы.

14) iGaming ерекшелігі

Жылдам мөлшерлеме (quick bet): коэффициенттің контекстік мәзірінде - «X қою» (алдын- баптау), «Купонға қосу», «Коэффициентті өзгертуге жазылу». Растау/undo міндетті.
Таңдаулы/жазылу: «Провайдер/ойынды таңдаулыларға қосу», «Турнирге жазылу».
Кэш-аут: инлайн растауымен және ағымдағы сомасымен; нарық мәртебесі кезінде ғана қол жетімді.
Модерация/репорттар: «Шағымдану», «Сөйлесуге тыйым салу» - қауіпсіз, рөлдер бойынша көрінеді.
Жауапты ойын: «Лимит белгілеу», «Пауза 24 ч» - агрессивті түстерсіз, салдарын анық сипаттай отырып.

15) Қарсы үлгілер

Сыни әрекеттер тек мәтінмәндік мәзірде жасырылған.
Мәтiнсiз тармақтар (бiр ғана белгiлер), әсiресе тiзiмдерде.
Ауысымға ауысу кезінде курсордың кетуіне кездейсоқ жабу (кідіріс/дәліз жоқ).
Мәзір көз элементін жабады немесе экраннан шығады (flip/shift жоқ).
Растаусыз деструктивті/undo.
Айқын емес құқықтар (тармақ түсініктемесіз жоғалады).

16) QA-чек парағы

Қол жетімділік

• 'role = «menu «'/' menuitem 'дұрыс, roving tabindex және көрсеткілер жұмыс істейді.
• Esc мәзірді жабады, фокус дереккөзге оралады.
• Контраст пен фокус сақинасы AA-ға сәйкес келеді.

Мінез-құлық

• Тармақтардың тәртібі жиілік пен тәуекелді көрсетеді; деструктивті төменде.
• Орналасу шеттерін ескереді (flip/shift); жедел анимациялар (≤ 200 мс).
• Алмасу ArrowRight бойынша ашылады және «діріл» болмайды (hover-intent 80-120 мс).

Мобильді

• қаптикамен 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 растау, дұрыс клавиатуралық навигация және нақты орналасу. Дизайн жүйесінде токендер мен үлгілерді бекітіңіз - пайдаланушылар қателесуден қорықпай, жылдам әрекет етеді.