@moontra/moonui 6.24.0 → 6.26.0

package/src/__tests__/issue-645-overlay-tab-focus.test.tsx

@@ -0,0 +1,262 @@
+/**
+ * issue #645 — 3 overlay açıkken Tab ne odak tuzağı kuruyor ne çıkış sağlıyor.
+ *
+ * KÖK NEDEN (ikisi de Radix'ten devralınmıştı, sarmalayıcı kusuru değildi):
+ *  - `@radix-ui/react-menu` → `MenuContentImpl`: `if (event.key === "Tab")
+ *    event.preventDefault();` — Tab yutuluyor ama karşılığında hiçbir şey
+ *    yapılmıyor (menü kapanmıyor, odak ilerlemiyor).
+ *  - `@radix-ui/react-popover` → `PopoverContentImpl`: içerik her zaman
+ *    `FocusScope`'a `loop: true` ile sarılıyor; `FocusScope` `!loop && !trapped`
+ *    kontrolü yüzünden non-modal popover'da da Tab'ı yutuyor/döngüye sokuyor.
+ *
+ * SÖZLEŞME:
+ *  - dropdown-menu = WAI-ARIA "menu button": Tab menüyü KAPATIR, odak tetikleyiciye döner.
+ *  - popover = non-modal disclosure: Tab kenarda overlay'den ÇIKAR (ve popover kapanır).
+ *  - `modal` popover'da tuzak KORUNUR.
+ *  - Escape davranışı DEĞİŞMEZ.
+ */
+import * as React from "react"
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "../components/ui/dropdown-menu"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../components/ui/popover"
+
+function MenuFixture() {
+  return (
+    <div>
+      <button type="button">before</button>
+      <DropdownMenu>
+        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Billing</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <button type="button">after</button>
+    </div>
+  )
+}
+
+function PopoverFixture({
+  modal = false,
+  withFields = false,
+}: {
+  modal?: boolean
+  withFields?: boolean
+}) {
+  return (
+    <div>
+      <button type="button">before</button>
+      <Popover modal={modal}>
+        <PopoverTrigger>Open popover</PopoverTrigger>
+        <PopoverContent>
+          <h4>Popover</h4>
+          {withFields ? (
+            <>
+              <button type="button">inner-first</button>
+              <button type="button">inner-last</button>
+            </>
+          ) : (
+            <p>A popover with no focusable content.</p>
+          )}
+        </PopoverContent>
+      </Popover>
+      <button type="button">after</button>
+    </div>
+  )
+}
+
+describe("issue #645 — dropdown-menu (WAI-ARIA menü sözleşmesi)", () => {
+  it("Tab menüyü kapatır ve odağı tetikleyiciye döndürür", async () => {
+    const user = userEvent.setup()
+    render(<MenuFixture />)
+
+    const trigger = screen.getByText("Open Menu")
+    await user.click(trigger)
+    expect(await screen.findByRole("menu")).toBeInTheDocument()
+
+    await user.tab()
+
+    // KUSURUN KİLİDİ: düzeltme geri alınırsa menü açık kalır ve bu bekleme kırmızıya döner.
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument()
+    })
+    await waitFor(() => {
+      expect(document.activeElement).toBe(trigger)
+    })
+  })
+
+  it("Shift+Tab de aynı sözleşmeyi uygular", async () => {
+    const user = userEvent.setup()
+    render(<MenuFixture />)
+
+    await user.click(screen.getByText("Open Menu"))
+    expect(await screen.findByRole("menu")).toBeInTheDocument()
+
+    await user.tab({ shift: true })
+
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument()
+    })
+  })
+
+  it("Escape davranışı korunur (kapanır + odak tetikleyiciye döner)", async () => {
+    const user = userEvent.setup()
+    render(<MenuFixture />)
+
+    const trigger = screen.getByText("Open Menu")
+    await user.click(trigger)
+    expect(await screen.findByRole("menu")).toBeInTheDocument()
+
+    await user.keyboard("{Escape}")
+
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument()
+    })
+    await waitFor(() => {
+      expect(document.activeElement).toBe(trigger)
+    })
+  })
+
+  it("kontrollü kullanım (`open`/`onOpenChange`) bozulmaz", async () => {
+    const user = userEvent.setup()
+    const onOpenChange = jest.fn()
+
+    function Controlled() {
+      const [open, setOpen] = React.useState(false)
+      return (
+        <DropdownMenu
+          open={open}
+          onOpenChange={(next) => {
+            onOpenChange(next)
+            setOpen(next)
+          }}
+        >
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Profile</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    }
+
+    render(<Controlled />)
+    await user.click(screen.getByText("Open Menu"))
+    expect(await screen.findByRole("menu")).toBeInTheDocument()
+    expect(onOpenChange).toHaveBeenCalledWith(true)
+
+    await user.tab()
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument()
+    })
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+})
+
+describe("issue #645 — popover (non-modal disclosure sözleşmesi)", () => {
+  it("odaklanabilir içerik YOKKEN Tab konteynerde donmaz, dışarı çıkar", async () => {
+    const user = userEvent.setup()
+    render(<PopoverFixture />)
+
+    await user.click(screen.getByText("Open popover"))
+    const content = await screen.findByRole("dialog")
+    await waitFor(() => expect(document.activeElement).toBe(content))
+
+    await user.tab()
+
+    // KUSURUN KİLİDİ: düzeltme geri alınırsa odak `content`te kalır.
+    expect(document.activeElement).not.toBe(content)
+    expect(document.activeElement).toBe(screen.getByText("after"))
+  })
+
+  it("odaklanabilir içerik VARKEN son elemandan sonra dışarı çıkar", async () => {
+    const user = userEvent.setup()
+    render(<PopoverFixture withFields />)
+
+    await user.click(screen.getByText("Open popover"))
+    await screen.findByRole("dialog")
+    // Radix açılışta içerikteki ilk odaklanabilir elemana odaklanır.
+    await waitFor(() =>
+      expect(document.activeElement).toBe(screen.getByText("inner-first"))
+    )
+
+    const innerFirst = screen.getByText("inner-first")
+    await user.tab()
+    expect(document.activeElement).toBe(screen.getByText("inner-last"))
+
+    // Radix `loop: true` burada başa döndürüyordu; artık dışarı çıkmalı.
+    await user.tab()
+    expect(document.activeElement).not.toBe(innerFirst)
+    expect(document.activeElement).toBe(screen.getByText("after"))
+    // Non-modal disclosure: odak dışarı çıkınca popover kapanır.
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    })
+  })
+
+  it("Shift+Tab ilk elemandan tetikleyiciye döner", async () => {
+    const user = userEvent.setup()
+    render(<PopoverFixture withFields />)
+
+    const trigger = screen.getByText("Open popover")
+    await user.click(trigger)
+    await screen.findByRole("dialog")
+    await waitFor(() =>
+      expect(document.activeElement).toBe(screen.getByText("inner-first"))
+    )
+
+    // Radix `loop: true` burada SON elemana döndürüyordu; artık tetikleyiciye dönmeli.
+    await user.tab({ shift: true })
+    expect(document.activeElement).not.toBe(screen.getByText("inner-last"))
+    expect(document.activeElement).toBe(trigger)
+  })
+
+  it("`modal` popover WAI-ARIA tuzağını KORUR (çıkış yapmaz)", async () => {
+    const user = userEvent.setup()
+    render(<PopoverFixture modal withFields />)
+
+    await user.click(screen.getByText("Open popover"))
+    const content = await screen.findByRole("dialog")
+    await waitFor(() =>
+      expect(document.activeElement).toBe(screen.getByText("inner-first"))
+    )
+
+    await user.tab()
+    await user.tab()
+    await user.tab()
+
+    // Modal'da odak asla `after` düğmesine sızmamalı.
+    expect(document.activeElement).not.toBe(screen.getByText("after"))
+    expect(content.contains(document.activeElement)).toBe(true)
+  })
+
+  it("Escape davranışı korunur (kapanır + odak tetikleyiciye döner)", async () => {
+    const user = userEvent.setup()
+    render(<PopoverFixture />)
+
+    const trigger = screen.getByText("Open popover")
+    await user.click(trigger)
+    expect(await screen.findByRole("dialog")).toBeInTheDocument()
+
+    await user.keyboard("{Escape}")
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    })
+    await waitFor(() => {
+      expect(document.activeElement).toBe(trigger)
+    })
+  })
+})

package/src/__tests__/issue-646-dark-scope-override.test.tsx

@@ -0,0 +1,297 @@
+/**
+ * #646 — cva'daki `dark:`-scope'lu arka plan hem component'in kendi metnini
+ * hem tüketicinin `className` override'ını eziyordu.
+ *
+ * ══ MEKANİZMA ══════════════════════════════════════════════════════════════════
+ * `tailwind-merge` yalnız AYNI değiştirici (modifier) kümesindeki sınıfları
+ * çakıştırır. Component `dark:bg-X`, tüketici öneksiz `bg-Y` yazdığında ikisi
+ * FARKLI grupta sayılır → ikisi de hayatta kalır → koyu temada `.dark .dark\:bg-X`
+ * daha yüksek özgüllükle KAZANIR. Tüketici zemini seçtiğini sanır, metnini ona
+ * göre ayarlar, koyu temada zemin bambaşkadır.
+ *
+ * Kusur, token'ın kendisi DOĞRUYKEN üstüne İKİNCİ bir katman eklenmesinden doğuyor:
+ * `--primary` koyu temada BİLİNÇLİ near-white (tokens.css:500, #368 — DEĞİŞMEZ) ve
+ * `bg-card` zaten kart zeminini taşıyor.
+ *
+ * ══ GERÇEK TARAYICI ÖLÇÜMLERİ (Chromium, localhost:3000, dark) ═════════════════
+ *   gradient-flow  `<Card className="bg-white/90">` → kart rgb(17,24,39)'da kalıyor
+ *                  `text-gray-900` çocukları TAM 1.00:1 (4 düğüm)  → 14.46 ✓
+ *                  `text-gray-700` 1.72 ✓→ 8.40 · `text-gray-600` 2.35 → 6.16
+ *   tabs pills     aktif sekme beyaz metin near-white zeminde 1.28:1 → 15.91 ✓
+ *   badge primary  varyantsız `<Badge className="bg-*-500/20 text-*-300">`
+ *                  1.10–1.48:1 (magnetic-button + swipe-actions) → tüketici kazanıyor
+ *
+ * ══ ⚠️ ÖLÇÜMÜN ENGELLEDİĞİ REGRESYON (#545 "ihlal takası" dersi) ═══════════════
+ * Tabs `pills`te `dark:data-[state=active]:bg-primary/90` KALDIRILMADI. Kaldırmak
+ * aynı varyanttaki `dark:bg-gray-800` (inaktif zemin) ile eşit özgüllüğe (0,2,0)
+ * düşürüyor; kaynak sırası gereği inaktif zemin kazanıyor ve aktif pill koyu temada
+ * near-black metinle gray-800 üstünde 1.41:1 veriyordu — bir ihlali kapatıp
+ * yenisini açmak. Orada yalnız `dark:…text-white` kaldırıldı.
+ */
+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 { Badge, badgeVariants } from '../components/ui/badge'
+import { Card, cardVariants } from '../components/ui/card'
+import { tabsTriggerVariants } from '../components/ui/tabs'
+import { cn } from '../lib/utils'
+
+const PKG = path.resolve(__dirname, '..')
+const tokens = fs.readFileSync(path.join(PKG, 'styles/tokens.css'), 'utf8')
+const cardSrc = fs.readFileSync(path.join(PKG, 'components/ui/card.tsx'), 'utf8')
+const badgeSrc = fs.readFileSync(path.join(PKG, 'components/ui/badge.tsx'), 'utf8')
+const tabsSrc = fs.readFileSync(path.join(PKG, 'components/ui/tabs.tsx'), 'utf8')
+
+type RGB = [number, number, number]
+type Blok = 'light' | 'dark'
+
+// ─── Renk aritmetiği (issue-544-kontrast.test.tsx ile birebir aynı yöntem) ───────
+function tokenOku(name: string, blok: Blok): string | null {
+  const source =
+    blok === 'dark' ? tokens.slice(tokens.indexOf('.dark')) : tokens.slice(0, tokens.indexOf('.dark'))
+  return source.match(new RegExp(`--${name}:\\s*([^;]+);`))?.[1].trim() ?? null
+}
+function hslToRgb(h: number, s: number, l: number): RGB {
+  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 semanticRgb = (name: string, blok: Blok): RGB => {
+  const v = tokenOku(name, blok) ?? tokenOku(name, 'light')!
+  const [h, s, l] = v.split(/\s+/).map((x) => parseFloat(x))
+  return hslToRgb(h, s, l)
+}
+function relativeLuminance([r, g, b]: RGB): 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 kontrast(a: RGB, b: RGB): number {
+  const la = relativeLuminance(a)
+  const lb = relativeLuminance(b)
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+/** Yarı saydam rengi opak zemine bindir — `bg-primary/90` gibi sınıflar için ŞART */
+const komposit = (ust: RGB, alt: RGB, alfa: number): RGB =>
+  ust.map((c, i) => Math.round(c * alfa + alt[i] * (1 - alfa))) as RGB
+
+const WHITE: RGB = [255, 255, 255]
+/** Docs kabuğunda ölçülen GERÇEK koyu kart (#284/#368/#448/#454/#544 konvansiyonu) */
+const CARD_ACTUAL_DARK: RGB = [17, 24, 39]
+const AA_TEXT = 4.5
+
+/** Bir sınıf dizesini TOKEN'lara böl — `hover:bg-primary/90` gibi komşulara
+ *  substring eşleşmesiyle takılmamak için (substring assert'i sessizce yanıltır). */
+const parcala = (s: string): string[] => s.split(/\s+/).filter(Boolean)
+
+/**
+ * Kaynak çapaları için YORUMLARI SÖK.
+ *
+ * ⚠️ Bu bu testin kendi yazımında ısırdı: düzeltmeyi ANLATAN yorum satırları
+ * kaldırılan sınıfın adını (`dark:bg-primary/90`) literal olarak içeriyor, bu
+ * yüzden ham kaynak üzerinde `not.toContain` yapmak testi yanlış sebeple kırmızı
+ * gösteriyordu. Çapa KODA bakmalı, kodun anlatısına değil.
+ */
+const yorumsuz = (src: string): string =>
+  src.replace(/\/\*[\s\S]*?\*\//g, ' ').replace(/(^|[^:])\/\/[^\n]*/g, '$1')
+/**
+ * DURAĞAN (resting) durumdaki `dark:bg-*` sınıfları.
+ *
+ * ⚠️ `dark:hover:bg-*` / `dark:data-[state=…]:bg-*` BİLEREK KAPSAM DIŞI: bu issue
+ * durağan durumu ölçüyor (axe/QC de öyle) ve durum-kapılı dallarda `dark:` özgüllüğü
+ * bazen ZORUNLU (bkz. tabs `pills` özgüllük kilidi testi).
+ */
+const darkArkaPlanlar = (s: string): string[] =>
+  parcala(s).filter((c) => /^dark:bg-/.test(c))
+
+// ════════════════════════════════════════════════════════════════════════════════
+describe('#646 — hesaplayıcı çapaları (sessiz-yeşil koruması)', () => {
+  it('ÇAPA: siyah↔beyaz tam 21.00', () => {
+    expect(kontrast([0, 0, 0], WHITE)).toBeCloseTo(21, 2)
+  })
+
+  it('ÇAPA: hesaplayıcı, GERÇEK TARAYICI ölçümünü birebir üretiyor', () => {
+    // Chromium'da `bg-primary` koyu temada rgb(248,250,252),
+    // `text-primary-foreground` rgb(2,2,5) olarak ölçüldü.
+    expect(semanticRgb('primary', 'dark')).toEqual([248, 250, 252])
+    expect(semanticRgb('primary-foreground', 'dark')).toEqual([2, 2, 5])
+    // `bg-primary/90` koyu kart üstünde rgb(225,227,231) ölçüldü.
+    expect(komposit(semanticRgb('primary', 'dark'), CARD_ACTUAL_DARK, 0.9)).toEqual([225, 227, 231])
+  })
+
+  it('NEGATİF KONTROL: eşik mantığı ayrım yapıyor — ESKİ ihlal GERÇEKTEN ihlaldi', () => {
+    // Kaldırılan `dark:…text-white` + `dark:bg-primary/90` çifti: 1.28:1 (issue gövdesi)
+    const eskiZemin = komposit(semanticRgb('primary', 'dark'), CARD_ACTUAL_DARK, 0.9)
+    expect(kontrast(eskiZemin, WHITE)).toBeCloseTo(1.28, 2)
+    expect(kontrast(eskiZemin, WHITE)).toBeLessThan(AA_TEXT)
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+describe('#646 — KAPSAM KİLİDİ: `--primary` token değeri DEĞİŞMEDİ (#368)', () => {
+  // Bu issue token'a DOKUNMAZ. Kök neden token değil, üstüne binen İKİNCİ katman.
+  it.each([
+    ['primary', 'dark', '210 40% 98%'],
+    ['primary-foreground', 'dark', '222.2 47.4% 1.2%'],
+    ['primary', 'light', '217.2 91.2% 51%'],
+  ])('--%s (%s) = %s', (name, blok, beklenen) => {
+    expect(tokenOku(name, blok as Blok)).toBe(beklenen)
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+describe('#646 (ii) — tüketici override`ı artık EZİLMİYOR (asıl kapı)', () => {
+  it('Card: `bg-white/90` verildiğinde hiçbir `dark:bg-*` hayatta kalmıyor', () => {
+    const merged = cn(cardVariants({}), 'bg-white/90 backdrop-blur-md')
+    expect(darkArkaPlanlar(merged)).toEqual([])
+    expect(parcala(merged)).toContain('bg-white/90')
+    // token da elenmiş olmalı (tüketici AYNI grupta kazanır)
+    expect(parcala(merged)).not.toContain('bg-card')
+  })
+
+  it('Badge (varyantsız = `primary`): tüketici bg/text ikisi de kazanıyor', () => {
+    const merged = cn(badgeVariants({}), 'bg-emerald-500/20 text-emerald-300')
+    expect(darkArkaPlanlar(merged)).toEqual([])
+    expect(parcala(merged)).toContain('bg-emerald-500/20')
+    expect(parcala(merged)).toContain('text-emerald-300')
+    expect(parcala(merged)).not.toContain('bg-primary')
+    expect(parcala(merged)).not.toContain('text-primary-foreground')
+  })
+
+  it('RENDER: <Badge className="bg-emerald-500/20 text-emerald-300"> DOM sınıfında `dark:bg-*` yok', () => {
+    const { container } = render(
+      <Badge className="bg-emerald-500/20 text-emerald-300">Live</Badge>
+    )
+    const el = container.firstElementChild as HTMLElement
+    expect(darkArkaPlanlar(el.className)).toEqual([])
+    expect(parcala(el.className)).toContain('bg-emerald-500/20')
+  })
+
+  it('RENDER: <Card className="bg-white/90"> DOM sınıfında `dark:bg-*` yok', () => {
+    const { container } = render(<Card className="bg-white/90">içerik</Card>)
+    const el = container.firstElementChild as HTMLElement
+    expect(darkArkaPlanlar(el.className)).toEqual([])
+    expect(parcala(el.className)).toContain('bg-white/90')
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+describe('#646 (i) — component kendi metnini artık EZMİYOR', () => {
+  it('Tabs `pills` aktif sekme: `dark:…text-white` KALDIRILDI', () => {
+    const pills = tabsTriggerVariants({ variant: 'pills' })
+    expect(parcala(pills)).not.toContain('dark:data-[state=active]:text-white')
+    expect(parcala(pills)).toContain('data-[state=active]:text-primary-foreground')
+  })
+
+  it('⚠️ Tabs `pills`: `dark:…bg-primary/90` BİLEREK KORUNDU (özgüllük kilidi)', () => {
+    // Kaldırılırsa `dark:bg-gray-800` (inaktif zemin) eşit özgüllükle kazanır ve
+    // aktif pill koyu temada 1.41:1'e düşer — #545'in "ihlal takası" tuzağı.
+    // Bu assert bilinçli kararı GÖRÜNÜR kılar; niyet değişirse burası düşer.
+    const pills = tabsTriggerVariants({ variant: 'pills' })
+    expect(parcala(pills)).toContain('dark:data-[state=active]:bg-primary/90')
+    expect(parcala(pills)).toContain('dark:bg-gray-800')
+  })
+
+  it('aktif pill / primary rozet çifti İKİ TEMADA da AA geçiyor', () => {
+    // dark: zemin `bg-primary/90` (korunan sınıf), metin `text-primary-foreground`
+    //
+    // ⚠️ ZEMİN AÇIKÇA YAZILIR (#544/#545 dersi): sınıf YARI SAYDAM olduğu için oran
+    // altındaki yüzeye bağlıdır. Kanonik koyu kart (#111827) üstünde 16.13; tabs
+    // docs sayfasında pill'in gerçek zemini rgb(224,226,229) çıktığı için orada
+    // tarayıcı 15.91 ölçtü. İkisi de AA'nın çok üstünde — fark yöntem farkı değil,
+    // yarı saydamlığın altındaki yüzeyin farkı.
+    const darkZemin = komposit(semanticRgb('primary', 'dark'), CARD_ACTUAL_DARK, 0.9)
+    const darkOran = kontrast(darkZemin, semanticRgb('primary-foreground', 'dark'))
+    expect(darkOran).toBeGreaterThan(AA_TEXT)
+    expect(darkOran).toBeCloseTo(16.13, 1)
+
+    // dark, rozet yolu: yarı saydamlık yok → tam `bg-primary`
+    const rozetOran = kontrast(semanticRgb('primary', 'dark'), semanticRgb('primary-foreground', 'dark'))
+    expect(rozetOran).toBeGreaterThan(AA_TEXT)
+    expect(rozetOran).toBeCloseTo(19.8, 1)
+
+    // light: DEĞİŞMEDİ — `dark:` sınıfları açık temada zaten uygulanmıyordu
+    const lightOran = kontrast(semanticRgb('primary', 'light'), semanticRgb('primary-foreground', 'light'))
+    expect(lightOran).toBeGreaterThan(AA_TEXT)
+    expect(lightOran).toBeCloseTo(4.7, 1)
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+describe('#646 — kaynak çapaları (regresyon koruması)', () => {
+  it('card cva TABANI: `dark:bg-gray-900` yok, `bg-card` token`ı duruyor', () => {
+    const taban = yorumsuz(cardSrc).match(/const cardVariants = cva\(\s*"([^"]+)"/)?.[1]
+    expect(taban).toBeDefined()
+    expect(parcala(taban!)).not.toContain('dark:bg-gray-900')
+    expect(parcala(taban!)).toContain('bg-card')
+    expect(darkArkaPlanlar(taban!)).toEqual([])
+  })
+
+  it('badge `primary` dalı: `dark:bg-primary/90` yok, öneksiz `bg-primary` var', () => {
+    expect(yorumsuz(badgeSrc)).not.toContain('dark:bg-primary/90')
+    expect(yorumsuz(badgeSrc)).toContain('bg-primary text-primary-foreground')
+  })
+
+  it('tabs `pills` dalı: `dark:data-[state=active]:text-white` yok', () => {
+    expect(yorumsuz(tabsSrc)).not.toContain('dark:data-[state=active]:text-white')
+  })
+
+  it('KARDEŞ TARAMA KİLİDİ: free pakette cva TABANINDA `dark:bg-*` kalmadı', () => {
+    // #646'nın ekseni "cva TABANINDA dark:-scope'lu arka plan". Tarama sonucu tek
+    // ihlal card.tsx'teydi; burası yeni bir taban ihlalinin sessizce girmesini
+    // engeller. (Varyant katmanındaki `dark:bg-*` ayrı bir sınıf — bkz. rapor.)
+    const uiDizin = path.join(PKG, 'components/ui')
+    const ihlaller: string[] = []
+    for (const dosya of fs.readdirSync(uiDizin).filter((f) => f.endsWith('.tsx'))) {
+      const src = yorumsuz(fs.readFileSync(path.join(uiDizin, dosya), 'utf8'))
+      // cva( sonrası ilk argüman: `"..."` ya da `[ ... ]`
+      for (const m of src.matchAll(/\bcva\(\s*(\[[\s\S]*?\]|"[^"]*")/g)) {
+        if (/dark:(?:[a-z-]+:)*bg-/.test(m[1])) ihlaller.push(`${dosya}: ${m[1].slice(0, 80)}`)
+      }
+    }
+    expect(ihlaller).toEqual([])
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+describe('#646 — NEGATİF KONTROL: kapsam dışı yollar BOZULMADI', () => {
+  it('Badge `outline` varyantı DEĞİŞMEDİ (`dark:bg-transparent` duruyor)', () => {
+    expect(parcala(badgeVariants({ variant: 'outline' }))).toContain('dark:bg-transparent')
+  })
+
+  it('Badge `destructive` #544 yolu bozulmadı (`bg-error-600`)', () => {
+    expect(parcala(badgeVariants({ variant: 'destructive' }))).toContain('bg-error-600')
+  })
+
+  it('Badge varsayılan görünümü: `text-primary-foreground` yolu korunuyor', () => {
+    const { container } = render(<Badge>Varsayılan</Badge>)
+    const cls = parcala((container.firstElementChild as HTMLElement).className)
+    expect(cls).toContain('bg-primary')
+    expect(cls).toContain('text-primary-foreground')
+    expect(cls).not.toContain('dark:text-white')
+  })
+
+  it('Card varsayılan görünümü: zemin token`a devredildi, kendi metniyle AA üstü', () => {
+    const { container } = render(<Card>içerik</Card>)
+    const cls = parcala((container.firstElementChild as HTMLElement).className)
+    expect(cls).toContain('bg-card')
+    // Koyu temada kartın kendi metni (`dark:text-gray-100`) `bg-card` üstünde
+    // ESKİSİNDEN İYİ: gray-900 üstünde 16.12 → bg-card üstünde 18.31 (ölçüldü).
+    const gray100: RGB = [243, 244, 246]
+    const oncekiOran = kontrast(CARD_ACTUAL_DARK, gray100)
+    const sonrakiOran = kontrast(semanticRgb('card', 'dark'), gray100)
+    expect(sonrakiOran).toBeGreaterThan(oncekiOran)
+    expect(sonrakiOran).toBeGreaterThan(AA_TEXT)
+  })
+})

package/src/__tests__/issue-661-a11y.test.tsx

@@ -0,0 +1,113 @@
+/**
+ * #661 — A1-A6 bundle, (A) a11y dilimi · free paket tarafı
+ *
+ * Kalem 2 · `file-upload` — gizli `<input type="file">` tüm bırakma alanını
+ *   `opacity-0` ile kaplıyor. Klavyeyle Tab'landığında odak GERÇEKTEN oraya
+ *   gidiyor ama görünür hiçbir iz yoktu (`focus-within` grep = 0). WCAG 2.4.7.
+ *   Odak halkası girdinin kendisine verilemez (görünmez), sarmalayıcıya
+ *   `focus-within` ile bağlanır.
+ *
+ * Kalem 7 · `rating` — `role="radiogroup"` sarmalayıcısı TEK tab durağı,
+ *   `role="radio"` çocuklarının hepsi `tabIndex={-1}`. Ne roving-tabindex ne
+ *   `aria-activedescendant` vardı: ok tuşlarıyla değer değişiyordu ama yardımcı
+ *   teknolojiye hangi radyonun aktif olduğu HİÇ bildirilmiyordu.
+ *
+ * ÖLÇÜM DİSİPLİNİ: iddia kaynak metninden değil, render edilmiş DOM'dan okunur.
+ * `aria-activedescendant`'ın İŞARET ETTİĞİ elemanın gerçekten var olduğu da
+ * ölçülür — var olmayan bir id'ye işaret etmek kusurun kendisidir.
+ */
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { FileUpload } from '../components/ui/file-upload'
+import { Rating } from '../components/ui/rating'
+
+/* ────────────────────────────────────────────────────────────────────────── *
+ * Kalem 2 · file-upload — gizli girdinin odak izi
+ * ────────────────────────────────────────────────────────────────────────── */
+describe('#661-2 · FileUpload gizli girdisi odaklanınca görsel iz üretir', () => {
+  it('bırakma alanı sarmalayıcısı focus-within odak halkası sınıflarını taşır', () => {
+    const { container } = render(<FileUpload />)
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement
+    expect(input).toBeInTheDocument()
+
+    // Girdi görünmez: kendi `focus-visible` halkası kullanıcıya HİÇBİR ŞEY göstermez.
+    expect(input.className).toContain('opacity-0')
+
+    const dropzone = input.parentElement as HTMLElement
+    // Kusurlu sürümde bu üç sınıfın ÜÇÜ DE yoktu.
+    expect(dropzone.className).toContain('focus-within:ring-2')
+    expect(dropzone.className).toContain('focus-within:ring-ring')
+    expect(dropzone.className).toContain('focus-within:ring-offset-2')
+  })
+
+  it('girdi gerçekten odaklanabilir — halka bağlandığı eleman odağı KAPSAR', () => {
+    const { container } = render(<FileUpload />)
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement
+    input.focus()
+    expect(document.activeElement).toBe(input)
+    // `focus-within` sarmalayıcıda çalışabilmesi için odaklanan eleman onun
+    // İÇİNDE olmalı — jsdom CSS uygulamaz, ama kapsama ilişkisi ölçülebilir.
+    expect(input.parentElement).toContainElement(input)
+  })
+})
+
+/* ────────────────────────────────────────────────────────────────────────── *
+ * Kalem 7 · rating — aktif radyo yardımcı teknolojiye bildiriliyor mu?
+ * ────────────────────────────────────────────────────────────────────────── */
+describe('#661-7 · Rating radiogroup aktif seçeneği duyurur', () => {
+  it('aria-activedescendant VAR ve var olan bir radyoyu işaret eder', () => {
+    render(<Rating defaultValue={3} aria-label="Score" />)
+    const group = screen.getByRole('radiogroup')
+
+    const active = group.getAttribute('aria-activedescendant')
+    expect(active).toBeTruthy()
+
+    const target = document.getElementById(active as string)
+    expect(target).not.toBeNull()
+    expect(target).toHaveAttribute('role', 'radio')
+    // Seçili değer 3 → işaret edilen radyo "checked" olmalı.
+    expect(target).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('ok tuşuyla değer değişince aktif seçenek de KAYAR', () => {
+    render(<Rating defaultValue={3} aria-label="Score" />)
+    const group = screen.getByRole('radiogroup')
+    const once = group.getAttribute('aria-activedescendant')
+
+    fireEvent.keyDown(group, { key: 'ArrowRight' })
+
+    const after = group.getAttribute('aria-activedescendant')
+    expect(after).not.toBe(once)
+    const target = document.getElementById(after as string)
+    expect(target).toHaveAttribute('aria-checked', 'true')
+    expect(target).toHaveAttribute('aria-label', '4 stars')
+  })
+
+  it('seçim yokken ARIA gereği İLK seçenek aktif kabul edilir (kırık id üretilmez)', () => {
+    render(<Rating aria-label="Score" />)
+    const group = screen.getByRole('radiogroup')
+    const active = group.getAttribute('aria-activedescendant')
+    // Kusurlu bir düzeltme burada `-option-0` üretip HİÇ VAR OLMAYAN bir id'ye
+    // işaret edebilirdi; ölçüm tam olarak bunu engelliyor.
+    const target = document.getElementById(active as string)
+    expect(target).not.toBeNull()
+    expect(target).toHaveAttribute('aria-label', '1 star')
+  })
+
+  it('salt-gösterim modunda aria-activedescendant HİÇ basılmaz (odak durağı yok)', () => {
+    render(<Rating value={4} readOnly aria-label="Score" />)
+    const group = screen.getByRole('radiogroup')
+    expect(group).not.toHaveAttribute('aria-activedescendant')
+  })
+
+  it('half hassasiyette id ondalık değerle çakışmaz', () => {
+    render(<Rating defaultValue={2.5} precision="half" aria-label="Score" />)
+    const group = screen.getByRole('radiogroup')
+    const target = document.getElementById(
+      group.getAttribute('aria-activedescendant') as string
+    )
+    expect(target).toHaveAttribute('aria-label', '2.5 stars')
+  })
+})