Navigatsiya · pattern
Hududlar navigatsiyasi (F6)
Sahifa hududlari orasida klaviatura bilan sakraş (4.24): F6 — keyingi hudud (sarlavha → navigatsiya → asosiy mazmun → yon panel → pastki qism), Shift+F6 — oldingisi, oxiridan boşiga aylanadi. Hududga qaytilganda fokus u yerda oxirgi turgan elementga tuşadi (CRM'da: jadvaldan filtrga va qaytib aynan öşa qatorga). Pastda qisqa yorliq hudud nomini körsatadi. Hududlar — semantik teglar (header, nav, main, aside, footer, search) va nomli section/form/region.
Faol mijozlar
Anatomiya
- root
.fx-landmarksşart - focused landmark
[data-landmark-focus]ixtiyoriy - hint
.fx-landmarks__hintixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| F6 | Keyingi hudud (oxiridan boşiga) |
| Shift + F6 | Oldingi hudud |
React Aria Landmarks naqşi: F6 / Shift+F6, aylanma tartib, oxirgi fokusni eslab qoliş. Hududning öziga fokus tuşsa tabindex=-1 qöyiladi va nomi (aria-label yoki rol) öqiladi. Modal dialog oçiq bölsa işlamaydi (fokus tuzoği buzilmasin).
Naqş: WAI-ARIA APG landmarks
Kod
AI uçun: qaçon işlatiladi
- Köp panelli ilova: CRM, admin, poçta — siçqonçasiz işlovçi tez ötsin.
- Ilova karkasi (shell) bor har sahifa — body'ga bir marta qöyiladi.
- Sahifa boşidan mazmunga bitta sakraş →
anchor - Tugmalar guruhi içida strelka bilan yuriş →
toolbar - Hududlarni div bilan yasamang — header, nav, main, aside, footer yoki role bering, aks holda F6 ularni topmaydi.
- Bir sahifada bir xil nomli ikki nav qoldirmang — aria-label bilan farqlang («Asosiy», «Sahifa içida»).
- F6 ni boşqa amalga boğlamang — brauzer va ekran öquvçilarda u hududlar tugmasi.
npx foxui add landmarks
<div class="fx-landmarks" data-fx-landmarks style="display: grid; gap: var(--fx-space-3)">
<header style="display: flex; gap: var(--fx-space-3); align-items: center">
<strong>Mijozlar bazasi</strong>
<search><input class="fx-input" type="search" placeholder="Mijoz qidiriş" aria-label="Mijoz qidiriş"></search>
</header>
<nav aria-label="Bölimlar"><a href="#">Arizalar</a> · <a href="#" aria-current="page">Mijozlar</a> · <a href="#">Hisobotlar</a></nav>
<main>
<h2 class="fx-heading" data-size="sm">Faol mijozlar</h2>
<button class="fx-btn" type="button">Dilnoza Rahimova</button>
<button class="fx-btn" type="button">Sardor Toʻxtayev</button>
</main>
<aside aria-label="Tafsilot"><button class="fx-btn" data-variant="ghost" type="button">Izoh qöşiş</button></aside>
<footer><p class="fx-text" data-tone="tertiary">F6 — keyingi hudud, Shift+F6 — oldingisi</p></footer>
</div>Tokenlar: --fx-bg-page --fx-border-color-focus --fx-border-width-focus --fx-ease-enter --fx-ease-exit --fx-font-size-sm --fx-font-weight-medium --fx-motion-exit-fast --fx-motion-fast --fx-motion-shift-sm --fx-radius-pill --fx-space-2 --fx-space-4 --fx-space-6 --fx-text-primary --fx-z-tip