@moontra/moonui 6.8.0 → 6.9.0

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)
+  })
+})

package/src/components/ui/carousel.tsx

@@ -89,12 +89,25 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
     );
     const [canScrollPrev, setCanScrollPrev] = React.useState(false);
     const [canScrollNext, setCanScrollNext] = React.useState(false);
+    /**
+     * #308-2: `aria-roledescription="carousel"/"slide"` doğru set edilmişti ama slayt
+     * DEĞİŞİMİNİ duyuran hiçbir şey yoktu — klavye/buton ile ilerleyen ekran-okuyucu
+     * kullanıcısı hangi slaytta olduğunu öğrenemiyordu. Embla'nın zaten dinlenen "select"
+     * olayına bağlı bir `aria-live="polite"` durum bölgesi eklendi.
+     */
+    const [slideState, setSlideState] = React.useState<{ current: number; total: number }>(
+      { current: 0, total: 0 }
+    );
 
     // Embla "select" olayında ileri/geri butonlarının durumunu güncelle
     const onSelect = React.useCallback((emblaApi: CarouselApi) => {
       if (!emblaApi) return;
       setCanScrollPrev(emblaApi.canScrollPrev());
       setCanScrollNext(emblaApi.canScrollNext());
+      setSlideState({
+        current: emblaApi.selectedScrollSnap() + 1,
+        total: emblaApi.scrollSnapList().length,
+      });
     }, []);
 
     const scrollPrev = React.useCallback(() => {
@@ -164,6 +177,17 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
           {...props}
         >
           {children}
+          {/*
+            #308-2: Görsel olarak gizli durum bölgesi. `aria-live="polite"` sayesinde slayt
+            değişimi (buton, klavye ya da sürükleme fark etmeksizin) duyurulur; `aria-atomic`
+            metnin tamamının okunmasını sağlar. Slayt sayısı henüz bilinmiyorken (ilk render,
+            embla init olmadan) hiçbir şey basılmaz — boş duyuru üretmemek için.
+          */}
+          <div aria-live="polite" aria-atomic="true" className="sr-only">
+            {slideState.total > 0
+              ? `Slide ${slideState.current} of ${slideState.total}`
+              : ""}
+          </div>
         </div>
       </CarouselContext.Provider>
     );

package/src/components/ui/command.tsx

@@ -167,6 +167,18 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
+    /**
+     * #308-6: cmdk, Separator'a `role="separator"` basıyor ve bu eleman
+     * `CommandList`'in (`role="listbox"`) çocuğu oluyor → listbox'ın izinli çocuğu
+     * yalnız `option`/`group` olduğu için axe `aria-required-children` (critical) veriyordu.
+     *
+     * `role` EZİLEMİYOR: cmdk 1.1.1 `{...props, "cmdk-separator":"", role:"separator"}`
+     * sırasıyla yazıyor, yani kendi rolü prop'lardan SONRA geliyor (kaynak doğrulandı).
+     * `aria-hidden` ise prop yayılımının içinde olduğu için geçiyor — ve ayraç zaten
+     * tümüyle dekoratif olduğundan erişilebilirlik ağacından çıkarılması DOĞRU davranış.
+     * Böylece listbox'ın sahiplendiği çocuklar arasında görünmez.
+     */
+    aria-hidden="true"
     className={cn("moonui-theme", "-mx-1 h-px bg-border", className)}
     {...props}
   />
@@ -219,4 +231,17 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
+}
+
+// #308-5: Sekiz Props interface'inin HİÇBİRİ export edilmiyordu → tüketici sarmalayıcı
+// yazarken tipi yeniden türetmek zorundaydı.
+export type {
+  CommandProps,
+  CommandDialogProps,
+  CommandInputProps,
+  CommandListProps,
+  CommandEmptyProps,
+  CommandGroupProps,
+  CommandSeparatorProps,
+  CommandItemProps,
 }

package/src/components/ui/scroll-area.tsx

@@ -5,16 +5,36 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "../../lib/utils"
 
+export interface ScrollAreaProps
+  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+  /**
+   * #308-1: Kaydırma alanının klavyeyle odaklanabilir olup olmayacağı. Varsayılan `true`
+   * — odaklanabilir içeriği olmayan bir kaydırma alanı aksi hâlde klavyeyle erişilemez
+   * (WCAG 2.1.1). Fazladan sekme durağı istenmeyen durumlarda `false`.
+   */
+  focusable?: boolean
+}
+
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  ScrollAreaProps
+>(({ className, children, focusable = true, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    {/*
+      #308-1: Viewport'a `tabIndex` VERİLMİYORDU ve bu davranış Radix'ten kalıtsal DEĞİL
+      (`@radix-ui/react-scroll-area` kaynağında tabIndex geçmiyor). Sonuç: içinde
+      odaklanabilir eleman bulunmayan bir ScrollArea klavyeyle HİÇ kaydırılamıyordu
+      (WCAG 2.1.1). Kaydırılabilir bölgenin odaklanabilir olması kanonik çözümdür;
+      ek sekme durağı istemeyen tüketici `focusable={false}` diyebilir.
+    */}
+    <ScrollAreaPrimitive.Viewport
+      tabIndex={focusable ? 0 : undefined}
+      className="h-full w-full rounded-[inherit]"
+    >
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />

package/src/components/ui/skeleton.tsx

@@ -144,10 +144,25 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
     }
 
     const SkeletonElement = useMotion ? motion.div : "div";
-    
+
     return (
       <SkeletonElement
         ref={ref}
+        /**
+         * #320: Skeleton hiçbir a11y işareti taşımıyordu — ne `aria-hidden`, ne `role`,
+         * ne `aria-busy`. Radix kullanmadığı için kalıtsal semantik de yok.
+         *
+         * Konvansiyon olarak `aria-hidden` seçildi (`role="status"` DEĞİL): tek bir yükleme
+         * durumu tipik olarak ONLARCA skeleton render eder (`SkeletonText` tek başına N satır
+         * basar) — her biri canlı bölge olsaydı ekran okuyucu aynı olayı N kez duyururdu.
+         * "Yükleniyor" duyurusunun sahibi `spinner.tsx:79-105` (`role="status"` +
+         * `aria-live="polite"` + `sr-only` etiket); skeleton onun görsel yer tutucusudur.
+         * Tüketici kapsayıcıya `aria-busy` koyarak durumu bildirir.
+         *
+         * Yalnız YER TUTUCU dalında: `isLoaded && children` dalı gerçek içerik döndürür ve
+         * yukarıda kasıtlı olarak işaretlenmemiştir.
+         */
+        aria-hidden="true"
         className={cn(
           "moonui-theme",
           skeletonVariants({ variant, size, shape, animation }),