@moontra/moonui 6.7.0 → 6.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "6.7.0",
+  "version": "6.8.0",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

package/src/components/ui/__tests__/a11y-group-c.test.tsx

@@ -0,0 +1,266 @@
+/**
+ * Grup C — a11y / geçersiz işaretleme düzeltmeleri (#309 breadcrumb, #315 pagination,
+ * #322 tabs).
+ *
+ * Bu testlerin ortak amacı: düzeltilen kusurların HER BİRİ, düzeltme geri alındığında
+ * kırmızıya dönecek biçimde sabitlensin. Mevcut suite'ler bu davranışların bir kısmını
+ * YANLIŞ yönde sabitliyordu (ör. `aria-current`'ı <li>'de, `aria-hidden`'ı ellipsis
+ * sarmalayıcısında doğruluyorlardı) — onlar da bu PR'da gerçeğe çekildi.
+ */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbEllipsis,
+  BreadcrumbSeparator,
+} from '../breadcrumb'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from '../pagination'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../tabs'
+
+/**
+ * Bir elemanın erişilebilirlik ağacından düşüp düşmediğini ata zincirine bakarak belirler.
+ * `getByText` aria-hidden'ı UMURSAMAZ — bu yüzden "metin DOM'da mı" testi, metnin ekran
+ * okuyucuya ULAŞTIĞINI kanıtlamaz. Grup C'nin iki kusuru da tam bu boşlukta saklanmıştı.
+ */
+function isHiddenFromAssistiveTech(el: Element | null): boolean {
+  let node: Element | null = el
+  while (node) {
+    if (node.getAttribute('aria-hidden') === 'true') return true
+    node = node.parentElement
+  }
+  return false
+}
+
+describe('#309 breadcrumb', () => {
+  it('asChild: className KAYBOLMAZ ve React geçersiz-prop uyarısı basılmaz', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+
+    render(
+      <BreadcrumbItem asChild>
+        <a href="/docs" data-testid="child-link">
+          Docs
+        </a>
+      </BreadcrumbItem>
+    )
+
+    const link = screen.getByTestId('child-link')
+    // Radix Slot, kendi className'ini çocuğunkiyle BİRLEŞTİRİR. React.Fragment yolunda
+    // className tümüyle düşüyordu.
+    expect(link.className).toContain('transition-colors')
+    expect(link).toHaveAttribute('href', '/docs')
+    expect(errorSpy).not.toHaveBeenCalled()
+
+    errorSpy.mockRestore()
+  })
+
+  it('asChild + isCurrent: aria-current çocuğa iner', () => {
+    render(
+      <BreadcrumbItem asChild isCurrent>
+        <span data-testid="child-page">Current</span>
+      </BreadcrumbItem>
+    )
+    expect(screen.getByTestId('child-page')).toHaveAttribute('aria-current', 'page')
+  })
+
+  it('ellipsis: "More pages" metni erişilebilirlik ağacında', () => {
+    render(<BreadcrumbEllipsis />)
+    const srText = screen.getByText('More pages')
+    expect(isHiddenFromAssistiveTech(srText)).toBe(false)
+  })
+
+  it('ellipsis: dekoratif ikon gizli KALIR', () => {
+    const { container } = render(<BreadcrumbEllipsis />)
+    const svg = container.querySelector('svg')
+    expect(svg).not.toBeNull()
+    expect(isHiddenFromAssistiveTech(svg)).toBe(true)
+  })
+
+  it('separator/ellipsis: `icon` prop\'u okunur, DOM\'a sızmaz', () => {
+    const { container: sep } = render(
+      <BreadcrumbSeparator icon={<i data-testid="sep-icon" />} />
+    )
+    expect(sep.querySelector('[data-testid="sep-icon"]')).not.toBeNull()
+    expect(sep.querySelector('[icon]')).toBeNull()
+
+    const { container: ell } = render(
+      <BreadcrumbEllipsis icon={<i data-testid="ell-icon" />} />
+    )
+    expect(ell.querySelector('[data-testid="ell-icon"]')).not.toBeNull()
+    expect(ell.querySelector('[icon]')).toBeNull()
+  })
+
+  it('kök `separator` alt ayraçlara iner; yerel icon/children onu EZER', () => {
+    const { container } = render(
+      <Breadcrumb separator={<i data-testid="root-sep" />}>
+        <BreadcrumbList>
+          <BreadcrumbItem>Home</BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>Docs</BreadcrumbItem>
+          <BreadcrumbSeparator icon={<i data-testid="local-sep" />} />
+          <BreadcrumbItem isCurrent>Breadcrumb</BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    )
+
+    // Kök ayraç context ile indi
+    expect(container.querySelectorAll('[data-testid="root-sep"]')).toHaveLength(1)
+    // Yerel `icon` kökü ezdi
+    expect(container.querySelectorAll('[data-testid="local-sep"]')).toHaveLength(1)
+  })
+
+  it('separator/showHomeIcon `<nav>` DOM\'una SIZMAZ', () => {
+    const { container } = render(
+      <Breadcrumb separator={<i />} showHomeIcon>
+        <BreadcrumbList>
+          <BreadcrumbItem>Home</BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    )
+
+    const nav = container.querySelector('nav')!
+    // Eskiden ikisi de destructure edilmiyor, `{...props}` ile öznitelik olarak basılıyordu.
+    expect(nav.hasAttribute('separator')).toBe(false)
+    expect(nav.hasAttribute('showhomeicon')).toBe(false)
+  })
+})
+
+describe('#315 pagination', () => {
+  it('ellipsis: "More pages" metni erişilebilirlik ağacında', () => {
+    render(<PaginationEllipsis />)
+    const srText = screen.getByText('More pages')
+    expect(isHiddenFromAssistiveTech(srText)).toBe(false)
+  })
+
+  it('Previous/Next etiketi küçük ekranda gizlenir, erişilebilir ad korunur', () => {
+    render(
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="#" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    )
+
+    // Görsel etiket `sm` altında display:none — 375px'te 88px'lik taşmanın kaynağıydı.
+    expect(screen.getByText('Previous')).toHaveClass('hidden', 'sm:inline')
+    expect(screen.getByText('Next')).toHaveClass('hidden', 'sm:inline')
+
+    // Ad `aria-label`'dan geldiği için ekran-okuyucu deneyimi değişmez.
+    expect(screen.getByLabelText('Go to previous page')).toBeInTheDocument()
+    expect(screen.getByLabelText('Go to next page')).toBeInTheDocument()
+  })
+
+  it('beş alt-component ref iletir', () => {
+    const refs = {
+      nav: React.createRef<HTMLElement>(),
+      link: React.createRef<HTMLAnchorElement>(),
+      prev: React.createRef<HTMLAnchorElement>(),
+      next: React.createRef<HTMLAnchorElement>(),
+      ellipsis: React.createRef<HTMLSpanElement>(),
+    }
+
+    render(
+      <Pagination ref={refs.nav}>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationLink ref={refs.link} href="#">
+              1
+            </PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationPrevious ref={refs.prev} href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext ref={refs.next} href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationEllipsis ref={refs.ellipsis} />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    )
+
+    expect(refs.nav.current?.tagName).toBe('NAV')
+    expect(refs.link.current?.tagName).toBe('A')
+    expect(refs.prev.current?.tagName).toBe('A')
+    expect(refs.next.current?.tagName).toBe('A')
+    expect(refs.ellipsis.current?.tagName).toBe('SPAN')
+  })
+})
+
+describe('#322 tabs (free)', () => {
+  const renderTabs = (props: React.ComponentProps<typeof Tabs> = {}) =>
+    render(
+      <Tabs defaultValue="a" {...props}>
+        <TabsList data-testid="list">
+          <TabsTrigger value="a" data-testid="trigger">
+            A
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">içerik</TabsContent>
+      </Tabs>
+    )
+
+  it('orientation="vertical" Root + List + Trigger\'ın ÜÇÜNE birden iner', () => {
+    const { container } = renderTabs({ orientation: 'vertical' })
+
+    // Root: Radix'in kendi data-özniteliği
+    expect(container.querySelector('[data-orientation="vertical"]')).not.toBeNull()
+    // List ve Trigger: CVA dikey sınıfları — eskiden bunlar Root'tan HİÇ beslenmiyordu,
+    // sonuç: klavye yönü dikey, görünüm yatay.
+    expect(screen.getByTestId('list').className).toContain('flex-col')
+    expect(screen.getByTestId('trigger').className).toContain('justify-start')
+  })
+
+  it('vertical={true} (deprecated) hâlâ çalışır', () => {
+    renderTabs({ vertical: true })
+    expect(screen.getByTestId('list').className).toContain('flex-col')
+  })
+
+  it('açık orientation, vertical prop\'unu EZER', () => {
+    renderTabs({ vertical: true, orientation: 'horizontal' })
+    expect(screen.getByTestId('list').className).toContain('flex-row')
+    expect(screen.getByTestId('list').className).not.toContain('flex-col')
+  })
+
+  it('alt-component kendi orientation\'ını verirse context\'i ezer', () => {
+    render(
+      <Tabs defaultValue="a" orientation="vertical">
+        <TabsList data-testid="list" orientation="horizontal">
+          <TabsTrigger value="a">A</TabsTrigger>
+        </TabsList>
+      </Tabs>
+    )
+    expect(screen.getByTestId('list').className).toContain('flex-row')
+  })
+
+  it('Root className verildiğinde `moonui-theme` KAYBOLMAZ', () => {
+    const { container } = render(
+      <Tabs defaultValue="a" className="custom-root" data-testid="root">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+        </TabsList>
+      </Tabs>
+    )
+    const root = container.querySelector('[data-testid="root"]')!
+    // Eskiden `{...props}` cn() sonucunu tümüyle eziyordu → tema kapsam sınıfı düşüyordu.
+    expect(root.className).toContain('moonui-theme')
+    expect(root.className).toContain('custom-root')
+  })
+})

package/src/components/ui/__tests__/breadcrumb.test.tsx

@@ -333,15 +333,24 @@ describe('Breadcrumb Components', () => {
       expect(button).toHaveTextContent('Custom Button')
     })
 
-    it('sets aria-current when isCurrent is true', () => {
+    // #309: `aria-current` sarmalayıcı <li>'den, geçerli sayfayı TEMSİL EDEN elemana taşındı
+    // (APG breadcrumb deseni). Bu test eskiden <li>'yi doğruluyordu — yani daha az doğru olan
+    // yerleşimi sabitliyordu.
+    it('sets aria-current on the page element (not the wrapper li)', () => {
       render(
         <BreadcrumbItem isCurrent data-testid="breadcrumb-item">
           Current Page
         </BreadcrumbItem>
       )
-      
-      const item = screen.getByTestId('breadcrumb-item')
-      expect(item).toHaveAttribute('aria-current', 'page')
+
+      const wrapper = screen.getByTestId('breadcrumb-item')
+      expect(wrapper.tagName).toBe('LI')
+      expect(wrapper).not.toHaveAttribute('aria-current')
+
+      const pageEl = screen.getByText('Current Page')
+      expect(pageEl).toHaveAttribute('aria-current', 'page')
+      // Çift duyuruyu önlemek için tam olarak BİR eleman taşımalı
+      expect(document.querySelectorAll('[aria-current="page"]')).toHaveLength(1)
     })
 
     it('does not set aria-current when isCurrent is false', () => {
@@ -467,7 +476,11 @@ describe('Breadcrumb Components', () => {
       // Ellipsis de <span> olarak render ediliyor.
       expect(ellipsis.tagName).toBe('SPAN')
       expect(ellipsis).toHaveAttribute('role', 'presentation')
-      expect(ellipsis).toHaveAttribute('aria-hidden', 'true')
+      // #309: bu satır eskiden `aria-hidden="true"` DOĞRULUYORDU — yani component'in
+      // "More pages" metnini ekran okuyucudan gizleyen kusurunu sabitliyordu. Gizleme
+      // artık yalnız dekoratif ikonun sarmalayıcısında.
+      expect(ellipsis).not.toHaveAttribute('aria-hidden')
+      expect(ellipsis.querySelector('[aria-hidden="true"]')).not.toBeNull()
     })
 
     it('applies custom className', () => {
@@ -539,11 +552,13 @@ describe('Breadcrumb Components', () => {
       
       const homeLink = screen.getByText('Home').closest('a')
       const productsLink = screen.getByText('Products').closest('a')
-      const currentItem = screen.getByText('Current Product').closest('li')
-      
+      const currentItem = screen.getByText('Current Product')
+
       expect(homeLink).toHaveAttribute('href', '/')
       expect(productsLink).toHaveAttribute('href', '/products')
+      // #309: <li>'de değil, geçerli sayfa elemanında
       expect(currentItem).toHaveAttribute('aria-current', 'page')
+      expect(currentItem.closest('li')).not.toHaveAttribute('aria-current')
     })
 
     it('renders with custom separators', () => {
@@ -635,8 +650,8 @@ describe('Breadcrumb Components', () => {
       )
       
       expect(screen.getByText('Only Item')).toBeInTheDocument()
-      const item = screen.getByText('Only Item').closest('li')
-      expect(item).toHaveAttribute('aria-current', 'page')
+      // #309: <li>'de değil, geçerli sayfa elemanında
+      expect(screen.getByText('Only Item')).toHaveAttribute('aria-current', 'page')
     })
 
     it('handles breadcrumb with only separators', () => {

package/src/components/ui/breadcrumb.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -31,10 +32,24 @@ const breadcrumbVariants = cva(
 interface BreadcrumbProps
   extends React.HTMLAttributes<HTMLElement>,
     VariantProps<typeof breadcrumbVariants> {
+  /**
+   * Alt `BreadcrumbSeparator`'ların varsayılan ayracı. #309: bu prop tipte tanımlıydı ama
+   * component gövdesinde HİÇ okunmuyordu → `{...props}` ile `<nav>`'a sızıyor, React
+   * bilinmeyen-öznitelik uyarısı basıyordu. Artık context ile alt ayraçlara iniyor;
+   * ayracın kendi `children`/`icon` prop'u bunu ezer.
+   */
   separator?: React.ReactNode;
+  /**
+   * @deprecated Hiçbir zaman uygulanmadı — kaynakta okunmuyordu ve `<nav>`'a sızıyordu
+   * (#309'da sızıntı kesildi, davranış eklenmedi). Ev ikonu için ilk `BreadcrumbItem`
+   * içine ikonu doğrudan koyun; işaretleme kararı tüketiciye ait olmalı.
+   */
   showHomeIcon?: boolean;
 }
 
+/** #309: kök `separator`'ı alt `BreadcrumbSeparator`'lara taşıyan tek kaynak. */
+const BreadcrumbSeparatorContext = React.createContext<React.ReactNode>(undefined);
+
 interface BreadcrumbListProps extends React.HTMLAttributes<HTMLOListElement> {
   collapsed?: boolean;
   collapsedWidth?: number;
@@ -57,13 +72,17 @@ interface BreadcrumbEllipsisProps extends React.HTMLAttributes<HTMLSpanElement>
 }
 
 const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
-  ({ className, variant, size, ...props }, ref) => (
-    <nav
-      ref={ref}
-      className={cn("moonui-theme", breadcrumbVariants({ variant, size }), className)}
-      aria-label="breadcrumb"
-      {...props}
-    />
+  // #309: `separator` ve `showHomeIcon` ESKİDEN destructure EDİLMİYORDU → `{...props}` ile
+  // `<nav>`'a öznitelik olarak basılıyor, React uyarı veriyordu. İkisi de artık ayrılıyor.
+  ({ className, variant, size, separator, showHomeIcon: _showHomeIcon, ...props }, ref) => (
+    <BreadcrumbSeparatorContext.Provider value={separator}>
+      <nav
+        ref={ref}
+        className={cn("moonui-theme", breadcrumbVariants({ variant, size }), className)}
+        aria-label="breadcrumb"
+        {...props}
+      />
+    </BreadcrumbSeparatorContext.Provider>
   )
 );
 Breadcrumb.displayName = "Breadcrumb";
@@ -109,27 +128,34 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(
 BreadcrumbList.displayName = "BreadcrumbList";
 
 const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
-  ({ className, isCurrent, href, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? React.Fragment : href ? "a" : "span";
-    const itemProps = asChild ? {} : href ? { href } : {};
+  ({ className, isCurrent, href, asChild = false, children, ...props }, ref) => {
+    // #309: `asChild` eskiden `React.Fragment`'e düşüyordu. Fragment yalnız `key` ve
+    // `children` kabul eder → aşağıdaki `className` sessizce KAYBOLUYOR ve React
+    // geliştirme modunda geçersiz-prop uyarısı basıyordu. Radix `Slot` prop'ları tek
+    // çocuğa birleştirir (className/style dahil) → hem stil hem a11y korunur.
+    const Comp = asChild ? Slot : href ? "a" : "span";
+    const itemProps = !asChild && href ? { href } : {};
 
     return (
       <li
         ref={ref}
         className={cn("moonui-theme", "inline-flex items-center gap-1.5", className)}
-        aria-current={isCurrent ? "page" : undefined}
         {...props}
       >
-        <Comp 
+        <Comp
+          // #309: `aria-current` eskiden yalnız sarmalayıcı <li>'deydi; APG breadcrumb
+          // deseni onu geçerli sayfayı temsil eden ELEMANDA ister. İkisinde birden
+          // bulunması çift duyuruya yol açacağı için <li>'den taşındı (kaldırılmadı).
+          aria-current={isCurrent ? "page" : undefined}
           className={cn(
             "transition-colors duration-200 hover:text-foreground",
-            isCurrent 
-              ? "font-medium text-foreground" 
+            isCurrent
+              ? "font-medium text-foreground"
               : "text-muted-foreground hover:text-foreground hover:underline hover:underline-offset-4 hover:decoration-muted-foreground/30"
           )}
           {...itemProps}
         >
-          {props.children}
+          {children}
         </Comp>
       </li>
     );
@@ -140,30 +166,51 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
 const BreadcrumbSeparator = ({
   children,
   className,
+  icon,
   ...props
-}: BreadcrumbSeparatorProps) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("moonui-theme", "text-muted-foreground opacity-70", className)}
-    {...props}
-  >
-    {children || <ChevronRight className="h-3.5 w-3.5" />}
-  </span>
-);
+}: BreadcrumbSeparatorProps) => {
+  // #309: kök `<Breadcrumb separator={…}>` değeri; yerel `children`/`icon` bunu ezer.
+  const rootSeparator = React.useContext(BreadcrumbSeparatorContext);
+
+  return (
+    // Ayraç tümüyle dekoratiftir → `aria-hidden` burada DOĞRU (ellipsis'in aksine içinde
+    // ekran-okuyucuya ait metin yok).
+    <span
+      role="presentation"
+      aria-hidden="true"
+      className={cn("moonui-theme", "text-muted-foreground opacity-70", className)}
+      {...props}
+    >
+      {/* #309: `icon` prop'u tipte tanımlıydı ama HİÇ OKUNMUYORDU → `{...props}` ile
+          DOM'a sızıyor, React bilinmeyen-öznitelik uyarısı basıyordu. Artık `children`
+          verilmediğinde ayraç ikonu olarak kullanılıyor. */}
+      {children || icon || rootSeparator || <ChevronRight className="h-3.5 w-3.5" />}
+    </span>
+  );
+};
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
 const BreadcrumbEllipsis = ({
   className,
+  icon,
   ...props
 }: BreadcrumbEllipsisProps) => (
+  // #309: `aria-hidden="true"` ESKİDEN BU ELEMANDAYDI → alt ağacın tamamı, içindeki
+  // `sr-only` "More pages" metni DAHİL, erişilebilirlik ağacından düşüyordu; yani metin
+  // hiçbir zaman duyurulmuyordu (eleman kendi amacını geçersiz kılıyordu). Gizleme artık
+  // yalnız dekoratif ikonda.
+  //
+  // `role="presentation"` KASITLI olarak korundu: span'in zaten örtük rolü yok, dolayısıyla
+  // zararsız ve alt ağacı GİZLEMEZ (aria-hidden'ın aksine) — kusur yalnız aria-hidden'dı.
   <span
     role="presentation"
-    aria-hidden="true"
     className={cn("moonui-theme", "flex items-center text-muted-foreground hover:text-foreground/80 transition-colors duration-200", className)}
     {...props}
   >
-    <MoreHorizontal className="h-4 w-4" />
+    <span aria-hidden="true" className="flex items-center">
+      {/* #309: `icon` prop'u — ayraçtaki ile aynı ölü-prop kusuru. */}
+      {icon || <MoreHorizontal className="h-4 w-4" />}
+    </span>
     <span className="sr-only">More pages</span>
   </span>
 );
@@ -206,4 +253,15 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
+  breadcrumbVariants,
+};
+
+// #309: Props interface'lerinin hiçbiri export edilmiyordu → tüketici sarmalayıcı
+// yazarken tipi yeniden türetmek zorunda kalıyordu.
+export type {
+  BreadcrumbProps,
+  BreadcrumbListProps,
+  BreadcrumbItemProps,
+  BreadcrumbSeparatorProps,
+  BreadcrumbEllipsisProps,
 };