@moontra/moonui 6.12.0 → 6.13.0

package/package.json

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

package/src/components/ui/__tests__/progress-accessible-name.test.tsx

@@ -0,0 +1,65 @@
+/**
+ * #343 — `role="progressbar"` erişilebilir ad taşır.
+ *
+ * Ölçüm component düzeyinde olduğunu kendi başına söylüyordu: `/docs/components/progress`
+ * sayfasındaki 39 ihlal, o sayfadaki progressbar'ların TAMAMIYDI. Kusur tek tek
+ * örneklerde değil component'in kendisindeydi.
+ *
+ * WAI-ARIA `progressbar`ın adlandırılmış olmasını ister; adsız kalırsa ekran okuyucu
+ * yalnız yüzdeyi duyurur — "67%" — neyin %67'si olduğu söylenmez.
+ *
+ * Tasarım kararı (#334'ün dersi): varsayılan ad COMPONENT'ten gelir. Erişilebilirliği
+ * "tüketici hatırlarsa" koşuluna bağlamak, `floating-action-button`da olduğu gibi
+ * sessizce ihlale dönüşür.
+ */
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Progress } from '../progress'
+
+describe('#343 Progress erişilebilir ad', () => {
+  it('ad verilmezse component KENDİ varsayılanını basar', () => {
+    render(<Progress value={67} />)
+    expect(screen.getByRole('progressbar')).toHaveAccessibleName('Progress')
+  })
+
+  it('tüketicinin `aria-label`i varsayılanı EZER', () => {
+    render(<Progress value={67} aria-label="Upload progress" />)
+    expect(screen.getByRole('progressbar')).toHaveAccessibleName('Upload progress')
+  })
+
+  it('`aria-labelledby` verildiğinde varsayılan `aria-label` HİÇ basılmaz', () => {
+    // İkisi birden basılsaydı accname yine labelledby'ı seçerdi ama DOM kirlenirdi;
+    // daha önemlisi, "ad zaten var" durumunun component tarafından anlaşılması gerekir.
+    render(
+      <>
+        <span id="etiket">Sync status</span>
+        <Progress value={30} aria-labelledby="etiket" />
+      </>
+    )
+    const bar = screen.getByRole('progressbar')
+    expect(bar).not.toHaveAttribute('aria-label')
+    expect(bar).toHaveAccessibleName('Sync status')
+  })
+
+  it('değer bilgisi korunur (ad eklemek onu bozmadı)', () => {
+    render(<Progress value={45} max={90} />)
+    const bar = screen.getByRole('progressbar')
+    expect(bar).toHaveAttribute('aria-valuenow', '45')
+    expect(bar).toHaveAttribute('aria-valuemax', '90')
+  })
+
+  it('`valueLabel` sayısal olmayan bir değeri `aria-valuetext` ile duyurur', () => {
+    // Görsel etiket "3/10" iken ekran okuyucunun ham "30" okuması kopukluk yaratır.
+    render(<Progress value={30} valueLabel="3/10 steps" />)
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuetext', '3/10 steps')
+  })
+
+  it('indeterminate durumda `aria-valuenow` YOK ama ad hâlâ var', () => {
+    render(<Progress indeterminate />)
+    const bar = screen.getByRole('progressbar')
+    expect(bar).not.toHaveAttribute('aria-valuenow')
+    expect(bar).toHaveAccessibleName('Progress')
+  })
+})

package/src/components/ui/progress.tsx

@@ -145,6 +145,11 @@ const Progress = React.forwardRef<
   
   // Etiket içeriği
   const label = valueLabel || `${Math.round(percentage)}%`;
+
+  // Tüketici kendi adını verdiyse varsayılanı basma. `aria-labelledby` accname
+  // algoritmasında `aria-label`i zaten ezer; yine de ikisini birden basmamak daha temiz.
+  const hasExplicitName =
+    props["aria-label"] != null || props["aria-labelledby"] != null;
   
   return (
     <>
@@ -167,6 +172,15 @@ const Progress = React.forwardRef<
         aria-valuemin={0}
         aria-valuemax={max}
         aria-valuenow={indeterminate ? undefined : normalizedValue}
+        // #343: WAI-ARIA `progressbar`ın adlandırılmış olmasını ister. Adsız kalırsa
+        // ekran okuyucu yalnız yüzdeyi duyurur: "67%" — neyin %67'si belli olmaz.
+        // Varsayılan ad component'ten gelir; "tüketici hatırlarsa" bir a11y stratejisi
+        // değildir (#334'ün dersi). `{...props}` bu satırlardan SONRA yayıldığı için
+        // tüketicinin verdiği `aria-label` her zaman kazanır.
+        aria-label={hasExplicitName ? undefined : "Progress"}
+        // Sayısal olmayan bir etiket verildiğinde ("3/10", "Uploading") ekran okuyucu
+        // ham sayı yerine bunu okumalı.
+        aria-valuetext={valueLabel}
         {...props}
       >
         <div