@moontra/moonui 6.18.0 → 6.19.1

package/src/components/ui/__tests__/slider-secondary-contrast.test.ts

@@ -0,0 +1,375 @@
+/**
+ * #389 — Slider `secondary` range↔track kontrast değişmezi.
+ *
+ * BULGU (#372'nin birebir ardılı, PR #385'in "yan bulgu" notundan): slider'ın
+ * range'i `bg-secondary`, track'i `bg-secondary/20` — ikisi de AYNI yüzey
+ * token'ına basıyor. `--secondary` light'ta rgb(235,239,245), dark'ta
+ * rgb(2,8,23); %20 alfa track ile tam dolgu iki temada da ~1.0 oranında kalıyor,
+ * slider'ın DOLU kısmı hiç görünmüyordu. axe bunu yakalamaz: `color-contrast`
+ * yalnız METİN öğelerini ölçer.
+ *
+ * DÜZELTME: range `bg-[rgb(var(--secondary-500))]` (tokens.css slate skalası).
+ * `bg-secondary-foreground` BİLEREK seçilmedi — light'ta --primary ile aynı
+ * hue/sat'ta ΔL=%2, dark'ta birebir --primary değeri: varyant primary klonuna
+ * dönerdi. Track `bg-secondary/20` KALDI (#372 seçenek 1; track↔zemin ayrışması
+ * ayrı token-ekseni bulgusudur, kapsam dışı).
+ *
+ * ZEMİN DENKLİĞİ (kendi doğrulaması, #389): slider'ın ölçüm zeminleri
+ * progress'inkiyle AYNI kümedir — track her iki component'te de `bg-secondary/20`
+ * alfa katmanı olduğundan bileşke rengi altındaki yüzeye bağlıdır; slider'ın
+ * sardığı `.moonui-theme` sınıfı paket CSS'inde HİÇBİR token'ı yeniden
+ * tanımlamaz (yalnız işaretleyici sınıf — `grep -rn '\.moonui-theme'
+ * packages/moonui/src/styles/` boş döner). Dolayısıyla #372'deki kademe seçimi
+ * (400/500/600 elemesi) slider için de birebir geçerlidir ve aşağıda yeniden
+ * hesaplanarak kilitlenir.
+ *
+ * Kabul kriteri (issue #389): range↔track kontrastı light ve dark temada ≥3:1
+ * (WCAG 1.4.11 non-text eşiği).
+ *
+ * Hesap yöntemi progress-secondary-contrast.test.ts / primary-subtle-token.test.ts
+ * ile birebir aynıdır; oradaki "hesaplayıcı doğru mu?" çapası burada da var.
+ */
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import * as fs from 'fs'
+import * as path from 'path'
+import { Slider } from '../slider'
+
+const KOK = path.resolve(__dirname, '../../..')
+const tokens = fs.readFileSync(path.join(KOK, 'styles/tokens.css'), 'utf8')
+
+/** "H S% L%" biçimindeki token değerini oku (light = :root, dark = .dark bloğu) */
+function tokenOku(ad: string, blok: 'light' | 'dark'): string | null {
+  const kaynak =
+    blok === 'dark'
+      ? tokens.slice(tokens.indexOf('.dark'))
+      : tokens.slice(0, tokens.indexOf('.dark'))
+  return kaynak.match(new RegExp(`--${ad}:\\s*([^;]+);`))?.[1].trim() ?? null
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  h /= 360
+  s /= 100
+  l /= 100
+  const f = (n: number) => {
+    const k = (n + h * 12) % 12
+    const a = s * Math.min(l, 1 - l)
+    return l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)))
+  }
+  return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))]
+}
+
+const hslTokenRgb = (v: string): [number, number, number] => {
+  const [h, s, l] = v.split(/\s+/).map((x) => parseFloat(x))
+  return hslToRgb(h, s, l)
+}
+
+/**
+ * Skala token'ları ("--secondary-500: 100 116 139") HSL DEĞİL, RGB üçlüsüdür
+ * (slate-500 = rgb(100,116,139) ile birebir; component'te bu yüzden
+ * `bg-[rgb(var(--secondary-500))]` kompozisyonu kullanılır, hsl() değil).
+ */
+const rgbTokenRgb = (v: string): [number, number, number] => {
+  const p = v.split(/\s+/).map((x) => parseFloat(x))
+  return [p[0], p[1], p[2]]
+}
+
+function bagilParlaklik([r, g, b]: [number, number, number]): number {
+  const c = (v: number) => {
+    const x = v / 255
+    return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4)
+  }
+  return 0.2126 * c(r) + 0.7152 * c(g) + 0.0722 * c(b)
+}
+
+function rgbKontrast(a: [number, number, number], b: [number, number, number]): number {
+  const la = bagilParlaklik(a)
+  const lb = bagilParlaklik(b)
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+/** `bg-secondary/20` gibi alfa katmanının zemin üstündeki bileşke rengi */
+function alfaBileske(
+  ust: [number, number, number],
+  alfa: number,
+  zemin: [number, number, number]
+): [number, number, number] {
+  return [
+    Math.round(alfa * ust[0] + (1 - alfa) * zemin[0]),
+    Math.round(alfa * ust[1] + (1 - alfa) * zemin[1]),
+    Math.round(alfa * ust[2] + (1 - alfa) * zemin[2]),
+  ]
+}
+
+/**
+ * Docs kabuğunda ölçülen GERÇEK koyu kart zemini (#111827 = rgb(17,24,39)) —
+ * #284/#368 konvansiyonu: kontrast, --background'ın yanında bu gerçek yüzeye
+ * göre de ölçülür (tokens.css --input notu).
+ */
+const KART_GERCEK_DARK: [number, number, number] = [17, 24, 39]
+
+/** Tema başına range (secondary-500) ve track (secondary@%20 ∘ zemin) renkleri */
+function temaRenkleri(blok: 'light' | 'dark') {
+  const dolgu = rgbTokenRgb(tokenOku('secondary-500', 'light')!) // skala yalnız :root'ta — iki temada aynı
+  const secondary = hslTokenRgb(tokenOku('secondary', blok)!)
+  const background = hslTokenRgb(tokenOku('background', blok)!)
+  const card = hslTokenRgb(tokenOku('card', blok)!)
+  const zeminler: Array<[string, [number, number, number]]> = [
+    ['--background', background],
+    ['--card', card],
+  ]
+  if (blok === 'dark') zeminler.push(['gerçek kart #111827', KART_GERCEK_DARK])
+  return { dolgu, secondary, zeminler }
+}
+
+/** Slider DOM'u: kök > .moonui-theme > track > range (thumb'lar track'ten SONRA) */
+function parcalar(container: HTMLElement) {
+  const kabuk = container.querySelector('.moonui-theme') as HTMLElement
+  expect(kabuk).not.toBeNull()
+  const track = kabuk.firstElementChild as HTMLElement
+  const range = track.firstElementChild as HTMLElement
+  expect(range).not.toBeNull()
+  return { track, range }
+}
+
+describe('#389 slider secondary range↔track kontrastı', () => {
+  it('hesaplayıcı DOĞRU — bilinen bir çift belgelenen oranı veriyor', () => {
+    // Sessiz-yeşil koruması: `--info-subtle` çifti tokens.css'te 9.52:1 diye
+    // belgelenmiş; hesaplayıcı bozulursa bu çapa kırmızı olur.
+    const oran = rgbKontrast(
+      hslTokenRgb(tokenOku('info-subtle', 'light')!),
+      hslTokenRgb(tokenOku('info-subtle-foreground', 'light')!)
+    )
+    expect(oran).toBeGreaterThan(9.3)
+    expect(oran).toBeLessThan(9.7)
+  })
+
+  it('--secondary-500 tanımlı ve RGB üçlüsü olarak ayrıştırılabiliyor', () => {
+    const ham = tokenOku('secondary-500', 'light')
+    expect(ham).toBeTruthy()
+    const rgb = rgbTokenRgb(ham!)
+    rgb.forEach((kanal) => {
+      expect(Number.isFinite(kanal)).toBe(true)
+      expect(kanal).toBeGreaterThanOrEqual(0)
+      expect(kanal).toBeLessThanOrEqual(255)
+    })
+  })
+
+  describe('kaynak sözleşmesi: range ile track FARKLI token’lara basıyor', () => {
+    const kaynak = fs.readFileSync(path.join(KOK, 'components/ui/slider.tsx'), 'utf8')
+
+    it('track secondary sınıfı `bg-secondary/20` (değişmedi)', () => {
+      expect(kaynak).toMatch(/secondary:\s*"bg-secondary\/20"/)
+    })
+
+    it('range secondary sınıfı `bg-[rgb(var(--secondary-500))]` (artık --secondary DEĞİL)', () => {
+      expect(kaynak).toMatch(/secondary:\s*"bg-\[rgb\(var\(--secondary-500\)\)\]"/)
+    })
+
+    it('#407: thumb secondary sınıfı `border-[rgb(var(--secondary-500))] bg-background`', () => {
+      // AYRI EKSEN (aşağıdaki "#407 thumb kenarlığı" bloğuna bakınız): #389 yalnız
+      // range↔track eksenini kapsıyordu, tutamacın kenarlığı bilerek dışarıda kalmıştı.
+      expect(kaynak).toMatch(
+        /secondary:\s*"border-\[rgb\(var\(--secondary-500\)\)\] bg-background"/
+      )
+      expect(kaynak).not.toMatch(/secondary:\s*"border-secondary bg-background"/)
+    })
+
+    it('zemin denkliği: `.moonui-theme` paket CSS’inde token yeniden tanımlamıyor', () => {
+      // Bu testin varlık sebebi: kontrast hesabı track'in altındaki yüzeyin
+      // --background/--card olduğunu VARSAYAR. Biri `.moonui-theme`i token
+      // kapsamına çevirirse (ör. `.moonui-theme { --secondary: ... }`) hesap
+      // sessizce yanlışlanır — o an bu test kırmızı olur.
+      const stilDizini = path.join(KOK, 'styles')
+      const stiller = fs
+        .readdirSync(stilDizini)
+        .filter((f) => f.endsWith('.css'))
+        .map((f) => fs.readFileSync(path.join(stilDizini, f), 'utf8'))
+        .join('\n')
+      expect(stiller).not.toMatch(/\.moonui-theme[^{]*\{[^}]*--secondary/)
+    })
+  })
+
+  describe('render sözleşmesi: <Slider /> secondary', () => {
+    it('rangeVariant="secondary" DOM’a yeni token’la iniyor, track eski token’da kalıyor', () => {
+      const { container } = render(
+        React.createElement(Slider, { trackVariant: 'secondary', rangeVariant: 'secondary' })
+      )
+      const { track, range } = parcalar(container)
+      expect(track).toHaveClass('bg-secondary/20')
+      expect(range.className).toContain('bg-[rgb(var(--secondary-500))]')
+      expect(range.className).not.toMatch(/(?:^|\s)bg-secondary(?:\s|$)/)
+    })
+
+    it('thumbVariant düşüşü KORUNUYOR — tek prop ile track+range ikisi de secondary', () => {
+      // `trackVariant || thumbVariant || "default"` ve
+      // `rangeVariant || thumbVariant || "primary"` düşüşleri değişmedi;
+      // en yaygın kullanım (<Slider thumbVariant="secondary" />) bu yoldan geçer.
+      const { container } = render(React.createElement(Slider, { thumbVariant: 'secondary' }))
+      const { track, range } = parcalar(container)
+      expect(track).toHaveClass('bg-secondary/20')
+      expect(range.className).toContain('bg-[rgb(var(--secondary-500))]')
+    })
+
+    it('rangeVariant açık verildiğinde thumbVariant’ı hâlâ eziyor', () => {
+      const { container } = render(
+        React.createElement(Slider, { thumbVariant: 'secondary', rangeVariant: 'success' })
+      )
+      const { range } = parcalar(container)
+      expect(range.className).toContain('bg-success')
+      expect(range.className).not.toContain('bg-[rgb(var(--secondary-500))]')
+    })
+
+    it('diğer varyantlar ETKİLENMEDİ — primary range hâlâ `bg-primary`', () => {
+      const { container } = render(React.createElement(Slider, { rangeVariant: 'primary' }))
+      const { range } = parcalar(container)
+      expect(range.className).toContain('bg-primary')
+      expect(range.className).not.toContain('secondary')
+    })
+  })
+
+  describe.each(['light', 'dark'] as const)('%s tema — kabul kriteri ≥3:1 (WCAG 1.4.11)', (blok) => {
+    it('YENİ range (secondary-500), track’in her olası zemindeki bileşkesine ≥3:1', () => {
+      // Ölçülen değerler: light 4.63 (--background=--card=beyaz) · dark 4.23
+      // (--background=--card) / 3.83 (gerçek kart #111827).
+      const { dolgu, secondary, zeminler } = temaRenkleri(blok)
+      for (const [ad, zemin] of zeminler) {
+        const track = alfaBileske(secondary, 0.2, zemin)
+        const oran = rgbKontrast(dolgu, track)
+        expect({ zemin: ad, oran }).toEqual({ zemin: ad, oran: expect.any(Number) })
+        expect(oran).toBeGreaterThanOrEqual(3.0)
+      }
+    })
+
+    it('ESKİ range (bg-secondary) aynı ölçümde başarısızdı — bug’ın belgesi', () => {
+      // Düzeltmenin GEREKLİLİĞİNİ sabitler: eski değer üç zeminde de eşiğin
+      // çok altındaydı (light 1.12 · dark 1.01 · gerçek kart 1.10).
+      const { secondary, zeminler } = temaRenkleri(blok)
+      for (const [, zemin] of zeminler) {
+        const track = alfaBileske(secondary, 0.2, zemin)
+        expect(rgbKontrast(secondary, track)).toBeLessThan(3.0)
+      }
+    })
+  })
+
+  describe('seçim gerekçesi: 500, iki temada birden geçen TEK skala kademesi', () => {
+    // Range her iki temada AYNI renk olduğundan parlaklığı [~0.107, ~0.289]
+    // bandında kalmalı: daha açık kademe light track'e (near-white), daha koyu
+    // kademe dark track'e (near-black) yetişemiyor. Komşu kademeler bunu kanıtlar.
+    it('secondary-400 light temada eşiğin ALTINDA kalır (~2.50)', () => {
+      const k400 = rgbTokenRgb(tokenOku('secondary-400', 'light')!)
+      const { secondary, zeminler } = temaRenkleri('light')
+      const track = alfaBileske(secondary, 0.2, zeminler[0][1])
+      expect(rgbKontrast(k400, track)).toBeLessThan(3.0)
+    })
+
+    it('secondary-600 dark temada eşiğin ALTINDA kalır (~2.66)', () => {
+      const k600 = rgbTokenRgb(tokenOku('secondary-600', 'light')!)
+      const { secondary, zeminler } = temaRenkleri('dark')
+      const track = alfaBileske(secondary, 0.2, zeminler[0][1])
+      expect(rgbKontrast(k600, track)).toBeLessThan(3.0)
+    })
+
+    it('secondary-500 üç zeminde de geçen TEK kademe — komşuları elenirken o kalır', () => {
+      // Tek testte tüm skalayı tarayıp "geçen kademe kümesi = {500}" iddiasını
+      // kilitler; ileride skala değerleri değişirse burası kırmızı olur.
+      const kademeler = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+      const gecenler = kademeler.filter((k) => {
+        const renk = rgbTokenRgb(tokenOku(`secondary-${k}`, 'light')!)
+        return (['light', 'dark'] as const).every((blok) => {
+          const { secondary, zeminler } = temaRenkleri(blok)
+          return zeminler.every(
+            ([, zemin]) => rgbKontrast(renk, alfaBileske(secondary, 0.2, zemin)) >= 3.0
+          )
+        })
+      })
+      expect(gecenler).toEqual([500])
+    })
+
+    it('secondary-foreground kontrastı GEÇERDİ ama primary klonu üretirdi — kilit', () => {
+      // Bu test "neden secondary-foreground değil?" kararının dayanağını sabitler:
+      // light'ta --secondary-foreground ile --primary aynı hue/sat'ta ΔL=%2
+      // (fill↔fill 1.07), dark'ta birebir aynı değer. Varyant kimliği kaybolurdu.
+      const lightOran = rgbKontrast(
+        hslTokenRgb(tokenOku('secondary-foreground', 'light')!),
+        hslTokenRgb(tokenOku('primary', 'light')!)
+      )
+      expect(lightOran).toBeLessThan(1.3) // ayırt edilemez — near-identical
+      expect(tokenOku('secondary-foreground', 'dark')).toBe(tokenOku('primary', 'dark'))
+    })
+  })
+})
+
+/**
+ * #407 — thumb kenarlığı: range↔track'ten FARKLI bir kontrast ekseni.
+ *
+ * #389 yalnız range↔track eksenini kapsadığı için tutamacın kenarlığı bilerek
+ * dışarıda bırakılmıştı (PR #406, "yan bulgu 2"): `border-secondary` + `bg-background`
+ * dolgu → kenarlık `--background`/`--card` üstünde light 1.15 · dark 1.01 oranında
+ * kalıyor, secondary slider'ın tutamacı zeminde kayboluyordu.
+ *
+ * Burada ölçülen eksen bileşen↔sayfa-zemini'dir; alfa katmanı YOKTUR (tutamacın
+ * dolgusu doğrudan `bg-background`, yani zeminin kendisi). Non-text UI bileşeni
+ * olduğundan WCAG 1.4.11 ≥3:1 ister.
+ *
+ * Aynı skala taraması bu eksende de tek kademe bırakır: `--secondary-500`.
+ * Pro paketinde ikizi: packages/moonui-pro/.../slider-secondary-contrast.test.tsx
+ */
+describe('#407 slider secondary thumb kenarlığı ↔ zemin kontrastı', () => {
+  /** Tutamaç track'in KARDEŞİDİR (track'ten sonra render edilir) */
+  const thumbBul = (container: HTMLElement) => {
+    const thumb = container.querySelector('[role="slider"]') as HTMLElement
+    expect(thumb).not.toBeNull()
+    return thumb
+  }
+
+  it('render sözleşmesi: thumbVariant="secondary" kenarlığı yeni token’la iniyor', () => {
+    const { container } = render(React.createElement(Slider, { thumbVariant: 'secondary' }))
+    const thumb = thumbBul(container)
+    expect(thumb.className).toContain('border-[rgb(var(--secondary-500))]')
+    expect(thumb.className).toContain('bg-background')
+    expect(thumb.className).not.toMatch(/(?:^|\s)border-secondary(?:\s|$)/)
+  })
+
+  it('render sözleşmesi: diğer varyantların kenarlığı ETKİLENMEDİ', () => {
+    const { container } = render(React.createElement(Slider, { thumbVariant: 'primary' }))
+    const thumb = thumbBul(container)
+    expect(thumb.className).toContain('border-primary')
+    expect(thumb.className).not.toContain('secondary')
+  })
+
+  describe.each(['light', 'dark'] as const)('%s tema — kabul kriteri ≥3:1', (blok) => {
+    it('YENİ kenarlık (secondary-500) her zemine ≥3:1', () => {
+      // Ölçülen: light 4.76 · dark 4.23 (gerçek kart #111827 üstünde 3.73).
+      const { dolgu, zeminler } = temaRenkleri(blok)
+      for (const [ad, zemin] of zeminler) {
+        const oran = rgbKontrast(dolgu, zemin)
+        expect({ zemin: ad, gecti: oran >= 3.0 }).toEqual({ zemin: ad, gecti: true })
+      }
+    })
+
+    it('ESKİ kenarlık (border-secondary) aynı ölçümde başarısızdı — bug’ın belgesi', () => {
+      // light 1.15 · dark 1.01 · gerçek kart 1.13 — tutamaç fiilen görünmüyordu.
+      const { secondary, zeminler } = temaRenkleri(blok)
+      for (const [, zemin] of zeminler) {
+        expect(rgbKontrast(secondary, zemin)).toBeLessThan(3.0)
+      }
+    })
+  })
+
+  it('seçim gerekçesi: bu eksende de geçen kademe kümesi tam olarak {500}', () => {
+    // Range ekseniyle AYNI kademede buluşması tesadüf değil, ölçüm sonucudur:
+    // alfa katmanı olmayan zemin, %20 alfa track'e çok yakın parlaklıkta olduğundan
+    // geçerli bant neredeyse aynıdır. Yine de bağımsız olarak taranır.
+    const kademeler = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+    const gecenler = kademeler.filter((k) => {
+      const renk = rgbTokenRgb(tokenOku(`secondary-${k}`, 'light')!)
+      return (['light', 'dark'] as const).every((blok) =>
+        temaRenkleri(blok).zeminler.every(([, zemin]) => rgbKontrast(renk, zemin) >= 3.0)
+      )
+    })
+    expect(gecenler).toEqual([500])
+  })
+})