@moontra/moonui 6.15.0 → 6.16.0

package/package.json

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

package/src/components/ui/__tests__/select-trigger-name.test.tsx

@@ -0,0 +1,65 @@
+/**
+ * #340 — `SelectTrigger` erişilebilir ad taşır.
+ *
+ * BULGUNUN İNCELİĞİ: docs'ta hiçbir tetikleyici etiketsiz değildi — hepsinde
+ * `<SelectValue placeholder="Select a theme" />` vardı ve metin ekranda GÖRÜNÜYORDU.
+ * Yine de axe 10 `button-name` ihlali sayıyordu. Sebebi axe'ın açıklaması verdi:
+ *
+ *   "Element does not have inner text that is visible to screen readers"
+ *
+ * `SelectPrimitive.Trigger` `role="combobox"` render eder ve ARIA'da bu rol
+ * **"name from author"**dur — erişilebilir ad İÇERİKTEN GELMEZ. Yani görünür metin
+ * gözle okunur ama ekran okuyucuya hiç ad taşımaz.
+ *
+ * Sonuç: `aria-label` verilmeyen HER MoonUI Select adsızdı. Bu bir docs örneği
+ * kusuru değil, component yüzeyiydi.
+ */
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Select, SelectTrigger, SelectValue } from '../select'
+
+const kur = (props: React.ComponentProps<typeof SelectTrigger> = {}) =>
+  render(
+    <Select>
+      <SelectTrigger {...props}>
+        <SelectValue placeholder="Select a theme" />
+      </SelectTrigger>
+    </Select>
+  )
+
+describe('#340 SelectTrigger erişilebilir ad', () => {
+  it('ad verilmezse GÖRÜNÜR içerik ada bağlanır', () => {
+    kur()
+    // `role="combobox"` içerikten ad almadığı için component `aria-labelledby`
+    // ile açıkça bağlamak zorunda.
+    expect(screen.getByRole('combobox')).toHaveAccessibleName('Select a theme')
+  })
+
+  it('tüketicinin `aria-label`i KAZANIR', () => {
+    kur({ 'aria-label': 'Theme selector' })
+    expect(screen.getByRole('combobox')).toHaveAccessibleName('Theme selector')
+  })
+
+  it('tüketicinin `aria-labelledby`si KORUNUR (ezilmez)', () => {
+    render(
+      <>
+        <span id="dis-etiket">Appearance</span>
+        <Select>
+          <SelectTrigger aria-labelledby="dis-etiket">
+            <SelectValue placeholder="Select a theme" />
+          </SelectTrigger>
+        </Select>
+      </>
+    )
+    expect(screen.getByRole('combobox')).toHaveAccessibleName('Appearance')
+  })
+
+  it('rol gerçekten `combobox` — bu testin varsayımı ayakta', () => {
+    // Radix rolü değiştirirse (ör. `button`) ad-içerikten-gelir kuralı geçerli olur
+    // ve bu bekçinin gerekçesi düşer. O zaman bilinçli gözden geçirilmeli.
+    kur()
+    expect(screen.getByRole('combobox')).toBeInTheDocument()
+  })
+})

package/src/components/ui/select.tsx

@@ -100,7 +100,24 @@ export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeo
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   SelectTriggerProps
->(({ className, children, variant, size, error, success, loading, leftIcon, rightIcon, ...props }, ref) => (
+>(({ className, children, variant, size, error, success, loading, leftIcon, rightIcon, ...props }, ref) => {
+  /**
+   * #340: `SelectPrimitive.Trigger` `role="combobox"` render eder. ARIA'da bu rol
+   * **"name from author"**dur — yani erişilebilir ad İÇERİKTEN GELMEZ. Tetikleyicinin
+   * içindeki görünür metin ("Select a theme") gözle okunur ama ekran okuyucuya HİÇ
+   * ad taşımaz; axe bunu `button-name` (critical) sayar.
+   *
+   * Sonuç: `aria-label` verilmeyen HER MoonUI Select adsızdı — docs örneği değil,
+   * component yüzeyi. Bu yüzden tetikleyicinin görünür içeriğine bir id verilip
+   * `aria-labelledby` ile ona bağlanıyor: ad, kullanıcının GÖRDÜĞÜ metin olur.
+   *
+   * Tüketici kendi `aria-label`/`aria-labelledby`sini verdiyse ona dokunulmaz.
+   */
+  const icerikId = React.useId()
+  const adVerilmis =
+    props["aria-label"] != null || props["aria-labelledby"] != null
+
+  return (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
@@ -119,8 +136,9 @@ const SelectTrigger = React.forwardRef<
     data-error={error ? true : undefined}
     data-success={success ? true : undefined}
     data-loading={loading ? true : undefined}
+    aria-labelledby={adVerilmis ? props["aria-labelledby"] : icerikId}
   >
-    <div className="flex items-center flex-1 gap-2">
+    <div id={icerikId} className="flex items-center flex-1 gap-2">
       {leftIcon && (
         <span className="flex items-center justify-center text-muted-foreground">
           {leftIcon}
@@ -143,7 +161,8 @@ const SelectTrigger = React.forwardRef<
       </SelectPrimitive.Icon>
     )}
   </SelectPrimitive.Trigger>
-))
+  )
+})
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
 /**