@moontra/moonui 6.7.0 → 6.9.0

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/__tests__/carousel.test.tsx

@@ -10,6 +10,11 @@ jest.mock('embla-carousel-react', () => {
     canScrollNext: jest.fn(() => true),
     scrollPrev: jest.fn(),
     scrollNext: jest.fn(),
+    // #308-2: slayt duyurusu ("Slide 2 of 5") bu iki metoda dayanır. Mock gerçek embla
+    // API'sinin alt kümesidir; eksik kalırsa component'in kusuru değil FIXTURE'ın eksiği
+    // olarak patlar (ilk yazımda 23 test bu yüzden kırmızıya döndü).
+    selectedScrollSnap: jest.fn(() => 0),
+    scrollSnapList: jest.fn(() => [0, 0.5, 1]),
     on: jest.fn(),
     off: jest.fn(),
   }
@@ -36,6 +41,8 @@ const embla = jest.requireMock('embla-carousel-react') as {
     canScrollNext: jest.Mock
     scrollPrev: jest.Mock
     scrollNext: jest.Mock
+    selectedScrollSnap: jest.Mock
+    scrollSnapList: jest.Mock
     on: jest.Mock
     off: jest.Mock
   }
@@ -59,6 +66,8 @@ describe('Carousel Components', () => {
     jest.clearAllMocks()
     mockApi.canScrollPrev.mockReturnValue(true)
     mockApi.canScrollNext.mockReturnValue(true)
+    mockApi.selectedScrollSnap.mockReturnValue(0)
+    mockApi.scrollSnapList.mockReturnValue([0, 0.5, 1])
   })
 
   describe('Carousel Root', () => {
@@ -71,6 +80,34 @@ describe('Carousel Components', () => {
       expect(carousel).toHaveAttribute('aria-roledescription', 'carousel')
     })
 
+    /**
+     * #308-2: `aria-roledescription` doğru set edilmişti ama slayt DEĞİŞİMİNİ duyuran
+     * hiçbir şey yoktu — ekran-okuyucu kullanıcısı ilerledikten sonra hangi slaytta
+     * olduğunu öğrenemiyordu. Biçim burada, embla mock'landığı için deterministik
+     * doğrulanabiliyor (gerçek embla jsdom'da ölçüm yapamaz).
+     */
+    it('slayt değişimini aria-live bölgesinde duyurur', () => {
+      mockApi.selectedScrollSnap.mockReturnValue(1)
+      mockApi.scrollSnapList.mockReturnValue([0, 0.5, 1])
+
+      const { container } = renderCarousel()
+      const live = container.querySelector('[aria-live="polite"]')
+
+      expect(live).not.toBeNull()
+      expect(live).toHaveAttribute('aria-atomic', 'true')
+      expect(live).toHaveClass('sr-only')
+      // selectedScrollSnap 0-tabanlı → kullanıcıya 1-tabanlı gösterilir
+      expect(live).toHaveTextContent('Slide 2 of 3')
+    })
+
+    it('slayt sayısı bilinmiyorken BOŞ duyuru basar', () => {
+      mockApi.scrollSnapList.mockReturnValue([])
+
+      const { container } = renderCarousel()
+      // Aksi hâlde ekran okuyucuya "Slide 1 of 0" giderdi.
+      expect(container.querySelector('[aria-live="polite"]')!.textContent).toBe('')
+    })
+
     it('applies moonui-theme and custom className', () => {
       renderCarousel({ className: 'custom-carousel' })
 

package/src/components/ui/__tests__/quality-group-de.test.tsx

@@ -0,0 +1,159 @@
+/**
+ * Grup D+E — #320 skeleton, #308 bundle (free tarafı).
+ *
+ * Her test, düzeltme geri alındığında kırmızıya dönecek biçimde yazıldı; canary ile
+ * doğrulandı (bkz. changelog).
+ */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Skeleton, SkeletonText } from '../skeleton'
+import { ScrollArea } from '../scroll-area'
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+} from '../command'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from '../carousel'
+
+// cmdk seçili öğeyi görünür alana kaydırır; jsdom `scrollIntoView` implement etmez.
+// Ortam eksiği — test edilen davranışla ilgisi yok.
+beforeAll(() => {
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = function scrollIntoView() {}
+  }
+})
+
+describe('#320 skeleton — a11y konvansiyonu', () => {
+  it('yer tutucu erişilebilirlik ağacından çıkarılır', () => {
+    const { container } = render(<Skeleton data-testid="sk" />)
+    expect(container.querySelector('[data-testid="sk"]')).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('N skeleton, N canlı bölge ÜRETMEZ (role="status" seçilmemesinin gerekçesi)', () => {
+    const { container } = render(<SkeletonText lines={5} />)
+    // Tek yükleme durumu onlarca skeleton basar; her biri canlı bölge olsaydı ekran
+    // okuyucu aynı olayı N kez duyururdu. Duyurunun sahibi spinner'dır.
+    expect(container.querySelectorAll('[role="status"]')).toHaveLength(0)
+    expect(container.querySelectorAll('[aria-live]')).toHaveLength(0)
+  })
+
+  it('isLoaded && children dalı GERÇEK içerik → gizlenmez', () => {
+    render(
+      <Skeleton isLoaded data-testid="loaded">
+        <span>gerçek içerik</span>
+      </Skeleton>
+    )
+    const el = screen.getByTestId('loaded')
+    expect(el).not.toHaveAttribute('aria-hidden')
+    expect(screen.getByText('gerçek içerik')).toBeInTheDocument()
+  })
+})
+
+describe('#308-1 scroll-area — klavye erişimi', () => {
+  it('viewport varsayılan olarak odaklanabilir (WCAG 2.1.1)', () => {
+    const { container } = render(
+      <ScrollArea className="h-20">
+        <p>odaklanabilir eleman içermeyen içerik</p>
+      </ScrollArea>
+    )
+    const viewport = container.querySelector('[data-radix-scroll-area-viewport]')
+    expect(viewport).not.toBeNull()
+    expect(viewport).toHaveAttribute('tabindex', '0')
+  })
+
+  it('focusable={false} ile sekme durağı kaldırılabilir', () => {
+    const { container } = render(
+      <ScrollArea focusable={false} className="h-20">
+        <p>içerik</p>
+      </ScrollArea>
+    )
+    expect(container.querySelector('[data-radix-scroll-area-viewport]'))
+      .not.toHaveAttribute('tabindex')
+  })
+})
+
+describe('#308-2 carousel — slayt duyurusu', () => {
+  it('aria-live durum bölgesi var ve atomik', () => {
+    const { container } = render(
+      <Carousel>
+        <CarouselContent>
+          <CarouselItem>1</CarouselItem>
+          <CarouselItem>2</CarouselItem>
+        </CarouselContent>
+      </Carousel>
+    )
+    const live = container.querySelector('[aria-live="polite"]')
+    expect(live).not.toBeNull()
+    expect(live).toHaveAttribute('aria-atomic', 'true')
+    expect(live).toHaveClass('sr-only')
+  })
+
+  /**
+   * Duyuru METNİNİN biçimi (`"Slide 2 of 5"`) burada DOĞRULANMIYOR — kasıtlı.
+   * jsdom'da her eleman sıfır boyutlu olduğu için embla'nın `scrollSnapList()` sonucu
+   * güvenilmez: tek item'lı carousel'de 1 snap, üç item'lıda 0 snap raporlandı. Bu sayıya
+   * dayanan bir assert, ürünü değil jsdom'un düzen eksikliğini sabitlerdi.
+   * Biçim ve slayt değişiminde güncellenme GERÇEK TARAYICIDA doğrulandı (bkz. changelog).
+   */
+  it('slayt sayısı BİLİNMİYORKEN boş duyuru basmaz', () => {
+    // Embla init olmadan (`total === 0`) metin boş kalmalı — aksi hâlde ekran okuyucuya
+    // "Slide 0 of 0" gider. Slayt İÇERMEYEN carousel bu durumu doğrudan üretir.
+    const { container } = render(
+      <Carousel>
+        <CarouselContent />
+      </Carousel>
+    )
+    expect(container.querySelector('[aria-live="polite"]')!.textContent).toBe('')
+  })
+})
+
+describe('#308-5/6 command', () => {
+  it('separator erişilebilirlik ağacından çıkarılır (listbox çocuk kuralı)', () => {
+    const { container } = render(
+      <Command>
+        <CommandInput placeholder="ara" />
+        <CommandList>
+          <CommandGroup heading="A">
+            <CommandItem value="bir">Bir</CommandItem>
+          </CommandGroup>
+          <CommandSeparator data-testid="sep" alwaysRender />
+          <CommandGroup heading="B">
+            <CommandItem value="iki">İki</CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    )
+
+    const sep = container.querySelector('[data-testid="sep"]')
+    expect(sep).not.toBeNull()
+    // cmdk `role="separator"` basar ve prop'lardan SONRA yazdığı için ezilemez;
+    // `aria-hidden` ile ağaçtan çıkarılır → listbox'ın sahiplendiği çocuk olmaktan çıkar.
+    expect(sep).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('listbox\'ın gizlenmemiş çocuğu separator DEĞİL', () => {
+    const { container } = render(
+      <Command>
+        <CommandList>
+          <CommandGroup heading="A">
+            <CommandItem value="bir">Bir</CommandItem>
+          </CommandGroup>
+          <CommandSeparator alwaysRender />
+        </CommandList>
+      </Command>
+    )
+    const listbox = container.querySelector('[role="listbox"]')!
+    const gorunurCocuklar = Array.from(listbox.querySelectorAll('[role="separator"]'))
+      .filter((el) => el.getAttribute('aria-hidden') !== 'true')
+    expect(gorunurCocuklar).toHaveLength(0)
+  })
+})