# 06 · UI/UX QA yoxlama siyahısı

> Təhvildən əvvəl keçilməli gate-lər. Keçilməyən bənd = **layihə təhvil sayılmır**.
> Sübut qaydası: `Shared/.claude/rules/evidence-gate.md` — hər UI düzəlişi skrinşotla təsdiqlənir.

---

## Gate 1 · Token təmizliyi (bloklayıcı)

```bash
# Sərt kodlanmış rəng axtarışı — nəticə BOŞ olmalıdır
grep -rnE "#[0-9a-fA-F]{3,8}\b|rgb\(|hsl\(" src/ --include=*.tsx --include=*.ts --include=*.css \
  | grep -v "tokens.css" | grep -v "\.svg" || echo "TƏMİZ"
```

- [ ] Məhsul kodunda hex/rgb/hsl yoxdur (yalnız `tokens.css`-də)
- [ ] `tailwind.config.ts` boş deyil — tokenlərə bağlanıb (audit tapıntısı P1)
- [ ] Yeni brend rəng adı əlavə edilməyib (`--brand-blue` və s.)
- [ ] Boşluq dəyərləri `--space-*` addımlarındandır, aralıq piksel yoxdur

---

## Gate 2 · Vəziyyətlər (bloklayıcı)

Hər məlumat çəkən ekran üçün:

- [ ] **Yüklənir** — skeleton var, layout sıçramır
- [ ] **Boş** — izah + birinci addım düyməsi
- [ ] **Xəta** — səbəb + sorğu ID + «Yenidən cəhd et»
- [ ] **Axtarış boş** — «filtri sıfırla» təklifi
- [ ] Tam ekran spinner yoxdur

---

## Gate 3 · Əlçatanlıq (bloklayıcı)

- [ ] Əsas mətn kontrastı ≥ 7:1, ikinci dərəcəli ≥ 4.5:1, UI sərhədi ≥ 3:1
- [ ] Yalnız ikonlu hər düymədə `aria-label`
- [ ] Klik `<button>`/`<a>` üzərindədir, `div` klik simulyasiyası yoxdur
- [ ] Klaviatura ilə bütün əsas axın keçilir, fokus görünür
- [ ] Modal daxilində fokus tələsi var, bağlananda fokus geri qayıdır
- [ ] Status yalnız rənglə verilmir — hər nişanın mətni var
- [ ] Forma sahələri `<label>` ilə bağlı; placeholder etiket əvəzi deyil
- [ ] `prefers-reduced-motion` hörmət olunur

---

## Gate 4 · Tema və skin

- [ ] Light və dark rejimdə hər ekran yoxlanılıb (skrinşot var)
- [ ] Dark tema light-ın inverti deyil — öz token dəsti var
- [ ] `data-theme` verilmədikdə `prefers-color-scheme` işləyir
- [ ] Skin dəyişdikdə heç bir sinif adı dəyişmir

---

## Gate 5 · Responsivlik

- [ ] `375px`, `768px`, `1280px`, `1920px` enlərində yoxlanılıb
- [ ] Heç bir enlikdə `body` üfüqi scroll etmir
- [ ] Cədvəl öz `overflow-x:auto` konteynerindədir
- [ ] `<64rem` sidebar overlay olur və bağlana bilir
- [ ] Toxunma hədəfləri ≥ 44×44px (mobil/terminal)

---

## Gate 6 · Dil

- [ ] `az`, `en`, `ru` faylları mövcuddur və dolu
- [ ] Sərt kodlanmış UI mətni yoxdur:

```bash
grep -rnE ">[A-ZƏÖÜĞİŞÇ][a-zəöüğışç]{3,}<" src/pages src/components --include=*.tsx | head
```

- [ ] Dil seçicisi `AZ`/`EN`/`RU` göstərir, emoji bayraq yoxdur
- [ ] Ən uzun tərcümədə düymə/menyu sınmır (adətən AZ, EN-dən ~20% uzun)
- [ ] Tarix, rəqəm, valyuta locale-ə uyğun formatlanır

---

## Gate 7 · Modal siyasəti

- [ ] Backdrop kliki modalı **bağlamır**
- [ ] ESC bağlamır (açıq icazə yoxdursa)
- [ ] Hər modalda görünən `✕` və/və ya «Ləğv et» var
- [ ] Dağıdıcı təsdiqdə nəticə rəqəmlə yazılıb

```bash
# Backdrop üzərində onClick axtarışı — nəticə BOŞ olmalıdır
grep -rn "inset-0" src/ -A3 --include=*.tsx | grep -n "onClick" || echo "TƏMİZ"
```

---

## Gate 8 · Vizual sübut (bloklayıcı)

- [ ] Hər əsas ekranın light + dark skrinşotu var
- [ ] Bug düzəlişindən sonra **əvvəl/sonra** müqayisəsi göstərilib
- [ ] Veb app-dırsa Playwright ilə render + konsol xətası yoxlanılıb

```bash
npx playwright test    # və ya: Skill playwright-cli
```

Skrinşotsuz «UI düzəldi» bəyanatı qəbul edilmir.

---

## Gate 9 · Sənəd uyğunluğu

- [ ] `DESIGN.md` kodla üst-üstə düşür (audit tapıntısı P4 — spec təcrid olunmasın)
- [ ] `UI_UX_SPECIFICATION.md`-də hər ekran üçün dörd vəziyyət yazılıb
- [ ] Yeni base komponent sənədə əlavə olunub
- [ ] `CHANGELOG.md`-də versiya qeydi var

---

## Yekun hesabat formatı

```
### UI/UX QA — «layihə» v«versiya»

| Gate | Nəticə | Qeyd |
|------|--------|------|
| 1 Token təmizliyi | ✅ | 0 sərt kodlanmış rəng |
| 2 Vəziyyətlər     | ✅ | 12/12 ekran |
| 3 Əlçatanlıq      | ✅ | min kontrast 4.7:1 |
| 4 Tema            | ✅ | light+dark skrinşot |
| 5 Responsivlik    | ✅ | 4 enlik |
| 6 Dil             | ✅ | az/en/ru |
| 7 Modal           | ✅ | backdrop klik yoxdur |
| 8 Vizual sübut    | ✅ | «N» skrinşot |
| 9 Sənəd           | ✅ | DESIGN.md sinxron |

Reproduce: «komanda»
```