@moontra/moonui 3.4.0 → 4.1.0

package/src/components/ui/input.tsx

@@ -157,6 +157,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     placeholder,
     ...props
   }, ref) => {
+    // Mesaj id'leri `props.id` yoksa "-error"/"-success" gibi SABİT string'e
+    // düşüyordu; aynı sayfada iki id'siz Input olduğunda DOM'da yinelenen id
+    // oluşuyor ve aria-describedby yanlış elemanı işaret ediyordu.
+    const reactId = React.useId();
+    const fieldId = props.id || reactId;
     // Floating label state management
     const [isFocused, setIsFocused] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(value || defaultValue || "");
@@ -242,7 +247,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             data-error={!!error ? "" : undefined}
             data-success={!!success ? "" : undefined}
             aria-invalid={!!error || !!isError || undefined}
-            aria-describedby={error ? `${props.id || ''}-error` : success ? `${props.id || ''}-success` : undefined}
+            aria-describedby={error ? `${fieldId}-error` : success ? `${fieldId}-success` : undefined}
             value={value}
             defaultValue={defaultValue}
             onChange={handleChange}
@@ -280,7 +285,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               messageType === "normal" && "text-muted-foreground",
               messageClassName
             )}
-            id={error ? `${props.id || ''}-error` : success ? `${props.id || ''}-success` : undefined}
+            id={error ? `${fieldId}-error` : success ? `${fieldId}-success` : undefined}
           >
             {error || success || ""}
           </p>

package/src/components/ui/label.tsx

@@ -7,13 +7,16 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../lib/utils"
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none text-gray-900 dark:text-gray-200 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:peer-disabled:opacity-60 transition-colors duration-200"
+  "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:peer-disabled:opacity-60 transition-colors duration-200"
 )
 
+export interface LabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,
+    VariantProps<typeof labelVariants> {}
+
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+  LabelProps
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}

package/src/components/ui/select.tsx

@@ -3,6 +3,7 @@
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp, Loader2 } from "lucide-react"
+import { cva } from "class-variance-authority"
 
 import { cn } from "../../lib/utils"
 
@@ -24,7 +25,51 @@ const SelectValue = SelectPrimitive.Value
 type SelectTriggerVariant = "standard" | "outline" | "ghost" | "underline";
 type SelectTriggerSize = "sm" | "md" | "lg";
 
-interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+/**
+ * Trigger varyantları `cva()` ile yönetilir (kütüphane geneli desen). Önceden
+ * `variant === "x" && "..."` manuel zincirlemesi kullanılıyor ve tüm renkler ham
+ * `gray-*` paletiyle yazılıyordu — tema/karanlık mod bu değerleri etkileyemiyordu.
+ * Artık semantik token'lara bağlı (`border-input`, `bg-background`, `bg-muted`…).
+ */
+const selectTriggerVariants = cva(
+  [
+    "flex w-full items-center justify-between gap-1 rounded-md transition-all duration-200",
+    "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+    "focus-visible:outline-none text-foreground",
+  ],
+  {
+    variants: {
+      variant: {
+        standard:
+          "border border-input bg-background hover:border-ring focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
+        outline:
+          "border border-input bg-transparent hover:border-ring focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
+        ghost:
+          "border-none bg-muted hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-primary/30",
+        underline:
+          "border-t-0 border-l-0 border-r-0 border-b border-input rounded-none px-0 bg-transparent hover:border-ring focus-visible:ring-0 focus-visible:border-b-2 focus-visible:border-primary",
+      },
+      size: {
+        sm: "h-8 text-xs px-2",
+        md: "h-10 text-sm px-3",
+        lg: "h-12 text-base px-4",
+      },
+      state: {
+        none: "",
+        error: "border-error focus-visible:ring-error/30 focus-visible:border-error",
+        success:
+          "border-success focus-visible:ring-success/30 focus-visible:border-success",
+      },
+    },
+    defaultVariants: {
+      variant: "standard",
+      size: "md",
+      state: "none",
+    },
+  }
+)
+
+export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
   /** Visual variant */
   variant?: SelectTriggerVariant;
   /** Size */
@@ -44,45 +89,36 @@ interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof Selec
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   SelectTriggerProps
->(({ className, children, variant = "standard", size = "md", error, success, loading, leftIcon, rightIcon, ...props }, ref) => (
+>(({ className, children, variant, size, error, success, loading, leftIcon, rightIcon, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      /* Base styles */
-      "flex w-full items-center justify-between gap-1 rounded-md transition-all duration-200",
-      "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      "focus-visible:outline-none",
-      /* Error state */
-      error && "border-error focus-visible:ring-error/30 focus-visible:border-error",
-      /* Success state */
-      success && "border-success focus-visible:ring-success/30 focus-visible:border-success",
-      /* Size variants */
-      size === "sm" && "h-8 text-xs px-2",
-      size === "md" && "h-10 text-sm px-3",
-      size === "lg" && "h-12 text-base px-4",
-      /* Visual variants */
-      variant === "standard" && "border border-gray-300 dark:border-gray-700 bg-background dark:bg-gray-800/80 dark:shadow-inner dark:shadow-gray-950/10 dark:text-gray-200 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 focus-visible:border-primary dark:focus-visible:border-primary/80",
-      variant === "outline" && "border border-gray-300 dark:border-gray-700 bg-transparent dark:text-gray-200 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 focus-visible:border-primary dark:focus-visible:border-primary/80",
-      variant === "ghost" && "border-none bg-gray-100 dark:bg-gray-800 dark:shadow-inner dark:shadow-gray-950/10 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20",
-      variant === "underline" && "border-t-0 border-l-0 border-r-0 border-b border-gray-300 dark:border-gray-600 rounded-none px-0 dark:text-gray-200 dark:bg-transparent hover:border-gray-400 dark:hover:border-gray-500 focus-visible:ring-0 focus-visible:border-b-2 focus-visible:border-primary dark:focus-visible:border-primary/80",
+      selectTriggerVariants({
+        variant,
+        size,
+        state: error ? "error" : success ? "success" : "none",
+      }),
       className
     )}
     {...props}
     disabled={props.disabled || loading}
+    // `error` görsel olarak işaretleniyordu ama yardımcı teknolojiye hiç
+    // duyurulmuyordu; Input/Textarea aynı kavramda `aria-invalid` set ediyor.
+    aria-invalid={error ? true : undefined}
     data-error={error ? true : undefined}
     data-success={success ? true : undefined}
     data-loading={loading ? true : undefined}
   >
     <div className="flex items-center flex-1 gap-2">
       {leftIcon && (
-        <span className="flex items-center justify-center text-gray-500 dark:text-gray-400">
+        <span className="flex items-center justify-center text-muted-foreground">
           {leftIcon}
         </span>
       )}
       {loading ? (
         <div className="flex items-center gap-2">
-          <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground dark:text-gray-400" />
-          <span className="text-muted-foreground dark:text-gray-400">Loading...</span>
+          <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+          <span className="text-muted-foreground">Loading...</span>
         </div>
       ) : children}
     </div>
@@ -198,7 +234,7 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName
 type SelectItemVariant = "default" | "subtle" | "destructive" | "success" | "warning";
 type SelectItemSize = "sm" | "md" | "lg";
 
-interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+export interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
   /** Visual variant */
   variant?: SelectItemVariant;
   /** Size */

package/src/components/ui/simple-editor.tsx

@@ -59,6 +59,10 @@ const ToolbarButton = ({ icon, tooltip, active, onClick, disabled }: ToolbarButt
         pressed={active}
         onPressedChange={() => onClick()}
         disabled={disabled}
+        // Butonun tek içeriği bir ikon; erişilebilir ad olmadan ekran okuyucu
+        // yalnızca "button" der. `tooltip` zaten insan-okur etiketi taşıyor.
+        // (Tooltip yalnızca fare/odak ile görünür, erişilebilir ad SAĞLAMAZ.)
+        aria-label={tooltip}
         className="h-8 w-8 p-0"
       >
         {icon}
@@ -82,7 +86,10 @@ const ColorPicker = ({ onColorSelect }: { onColorSelect: (color: string) => void
       {colors.map(color => (
         <button
           key={color}
-          className="w-6 h-6 rounded border-2 border-gray-200 hover:border-gray-400"
+          type="button"
+          // Swatch'ın tek içeriği arka plan rengi — erişilebilir ad şart.
+          aria-label={`Select color ${color}`}
+          className="w-6 h-6 rounded border-2 border-border hover:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
           style={{ backgroundColor: color }}
           onClick={() => onColorSelect(color)}
         />
@@ -589,10 +596,18 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
               ref={editorRef}
               contentEditable={!disabled}
               suppressContentEditableWarning
+              // Düz `div[contentEditable]` yardımcı teknolojiye bir form alanı
+              // olarak görünmüyordu: rolü yok, çok satırlı olduğu bilinmiyor ve
+              // erişilebilir adı yok.
+              role="textbox"
+              aria-multiline="true"
+              aria-label={placeholder}
+              aria-disabled={disabled || undefined}
               className={cn(
                 "p-4 outline-none prose prose-sm dark:prose-invert max-w-none overflow-y-auto",
-                "bg-slate-50 dark:bg-zinc-900/95",
-                "text-gray-900 dark:text-gray-100",
+                // Token'a bağlandı (önce `bg-slate-50 dark:bg-zinc-900/95` ve
+                // `text-gray-900 dark:text-gray-100` hardcode'luydu).
+                "bg-background text-foreground",
                 "focus:ring-0",
                 "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:mb-4",
                 "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mb-3",

package/src/components/ui/switch.tsx

@@ -2,11 +2,68 @@
 
 import * as React from "react"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { cva } from "class-variance-authority"
 
 import { cn } from "../../lib/utils"
 
 type SwitchSize = "sm" | "md" | "lg";
-type SwitchVariant = "primary" | "success" | "warning" | "danger" | "secondary";
+type SwitchVariant = "primary" | "success" | "warning" | "destructive" | "secondary";
+
+/**
+ * Boyut ve renk varyantları `cva()` ile yönetilir (kütüphane geneli desen).
+ * Önceden `size === "x" && "..."` biçiminde manuel zincirleme kullanılıyordu;
+ * `defaultVariants` yoktu ve varsayılanlar destructuring'de gizliydi.
+ */
+const switchVariants = cva(
+  [
+    "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full",
+    "border-2 border-transparent transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    // Kapalı durum token'a bağlı; `--input` karanlık modda kendi değerini taşır.
+    // (Önceden ayrıca `dark:data-[state=unchecked]:bg-gray-700/70` hardcode'u
+    // vardı ve token'ı eziyordu — kaldırıldı.)
+    "data-[state=unchecked]:bg-input",
+    "dark:focus-visible:ring-primary/40",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-8",
+        md: "h-6 w-11",
+        lg: "h-7 w-14",
+      },
+      variant: {
+        primary: "data-[state=checked]:bg-primary",
+        success: "data-[state=checked]:bg-success",
+        warning: "data-[state=checked]:bg-warning",
+        destructive: "data-[state=checked]:bg-error",
+        secondary: "data-[state=checked]:bg-accent",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "primary",
+    },
+  }
+)
+
+const switchThumbVariants = cva(
+  "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
+  {
+    variants: {
+      size: {
+        sm: "h-3 w-3 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        md: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+        lg: "h-6 w-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
 
 export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
   /** Switch boyutu */
@@ -26,58 +83,58 @@ export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof Switc
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   SwitchProps
->(({ className, size = "md", variant = "primary", loading, leftIcon, rightIcon, description, ...props }, ref) => (
-  <div className="moonui-theme inline-flex items-center gap-2">
-    {leftIcon && <span className="text-muted-foreground">{leftIcon}</span>}
-    <SwitchPrimitives.Root
-      className={cn(
-        "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 dark:data-[state=unchecked]:bg-gray-700/70 dark:focus-visible:ring-primary/40 dark:focus-visible:ring-offset-gray-950",
-        
-        // Boyutlar
-        size === "sm" && "h-4 w-8",
-        size === "md" && "h-6 w-11", 
-        size === "lg" && "h-7 w-14",
-        
-        // Varyantlar (checked durumunda)
-        variant === "primary" && "data-[state=checked]:bg-primary",
-        variant === "success" && "data-[state=checked]:bg-success",
-        variant === "warning" && "data-[state=checked]:bg-warning",
-        variant === "danger" && "data-[state=checked]:bg-error",
-        variant === "secondary" && "data-[state=checked]:bg-accent",
-        
-        // Unchecked durumu
-        "data-[state=unchecked]:bg-input",
-        
-        // Loading durumu
-        loading && "opacity-80 cursor-wait",
-        
-        className
-      )}
-      disabled={loading || props.disabled}
-      {...props}
-      ref={ref}
-    >
-      {loading ? (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="h-3 w-3 animate-spin rounded-full border-2 border-gray-300 border-t-primary"></div>
-        </div>
-      ) : null}
-      
-      <SwitchPrimitives.Thumb
+>(({
+  className,
+  size,
+  variant,
+  loading,
+  leftIcon,
+  rightIcon,
+  description,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}, ref) => {
+  // `description` görsel olarak render ediliyordu ama switch ile hiçbir
+  // programatik bağı yoktu — ekran okuyucu açıklamayı okuyamıyordu.
+  // Stabil bir id üretilip `aria-describedby` ile bağlanır; tüketicinin
+  // kendi verdiği `aria-describedby` korunur.
+  const reactId = React.useId()
+  const descriptionId = description ? `${reactId}-description` : undefined
+  const describedBy =
+    [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || undefined
+
+  return (
+    <div className="moonui-theme inline-flex items-center gap-2">
+      {leftIcon && <span className="text-muted-foreground">{leftIcon}</span>}
+      <SwitchPrimitives.Root
         className={cn(
-          "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
-          // Boyuta göre thumb boyutları
-          size === "sm" && "h-3 w-3 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
-          size === "md" && "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-          size === "lg" && "h-6 w-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0",
+          switchVariants({ size, variant }),
+          loading && "opacity-80 cursor-wait",
+          className
         )}
-      />
-    </SwitchPrimitives.Root>
-    {rightIcon && <span className="text-muted-foreground">{rightIcon}</span>}
-    {description && <span className="text-sm text-muted-foreground">{description}</span>}
-  </div>
-))
+        disabled={loading || props.disabled}
+        aria-describedby={describedBy}
+        {...props}
+        ref={ref}
+      >
+        {loading ? (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="h-3 w-3 animate-spin rounded-full border-2 border-muted border-t-primary" />
+          </div>
+        ) : null}
+
+        <SwitchPrimitives.Thumb className={cn(switchThumbVariants({ size }))} />
+      </SwitchPrimitives.Root>
+      {rightIcon && <span className="text-muted-foreground">{rightIcon}</span>}
+      {description && (
+        <span id={descriptionId} className="text-sm text-muted-foreground">
+          {description}
+        </span>
+      )}
+    </div>
+  )
+})
 Switch.displayName = SwitchPrimitives.Root.displayName
 
-export { Switch }
+export { Switch, switchVariants }
 export type { SwitchSize, SwitchVariant }

package/src/components/ui/tags-input.tsx

@@ -34,32 +34,92 @@ const TagsInput = React.forwardRef<HTMLInputElement, TagsInputProps>(
     const [inputValue, setInputValue] = React.useState("");
     const [error, setError] = React.useState("");
 
+    // Klavye navigasyonu için hem dışa verilen ref hem iç ref gerekiyor:
+    // etiketler arasında gezinirken odağı input'a geri döndürebilmeliyiz.
+    const innerInputRef = React.useRef<HTMLInputElement>(null);
+    React.useImperativeHandle(ref, () => innerInputRef.current as HTMLInputElement);
+
+    const tagButtonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
+    const errorId = React.useId();
+
+    const focusTag = (index: number) => {
+      if (value.length === 0) return;
+      const clamped = Math.max(0, Math.min(value.length - 1, index));
+      tagButtonRefs.current[clamped]?.focus();
+    };
+
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === "Enter" || e.key === delimiter) {
         e.preventDefault();
         addTag();
       } else if (e.key === "Backspace" && inputValue === "" && value.length > 0) {
         removeTag(value.length - 1);
+      } else if (e.key === "ArrowLeft" && inputValue === "" && value.length > 0) {
+        // Boş input'ta sola ok → son etikete geç (hedefli silme için giriş noktası).
+        e.preventDefault();
+        focusTag(value.length - 1);
       }
     };
 
+    /**
+     * Etiketler arası klavye gezintisi. Önceden etiketlere yalnızca Tab ile
+     * ulaşılabiliyor ve hedefli silme yoktu — Backspace her zaman SON etiketi
+     * siliyordu, aradaki bir etiketi klavyeyle silmenin yolu yoktu.
+     */
+    const handleTagKeyDown =
+      (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {
+        switch (e.key) {
+          case "ArrowLeft":
+            e.preventDefault();
+            focusTag(index - 1);
+            break;
+          case "ArrowRight":
+            e.preventDefault();
+            if (index >= value.length - 1) innerInputRef.current?.focus();
+            else focusTag(index + 1);
+            break;
+          case "Home":
+            e.preventDefault();
+            focusTag(0);
+            break;
+          case "End":
+            e.preventDefault();
+            focusTag(value.length - 1);
+            break;
+          case "Delete":
+          case "Backspace": {
+            e.preventDefault();
+            const remaining = value.length - 1;
+            removeTag(index);
+            // Silinenin yerine geçen etikete odaklan; liste bittiyse input'a dön.
+            requestAnimationFrame(() => {
+              if (remaining > 0) focusTag(Math.min(index, remaining - 1));
+              else innerInputRef.current?.focus();
+            });
+            break;
+          }
+          default:
+            break;
+        }
+      };
+
     const addTag = () => {
       const tag = inputValue.trim();
-      
+
       if (!tag) return;
-      
+
       if (!allowDuplicates && value.includes(tag)) {
         setError("This tag already exists");
         setTimeout(() => setError(""), 2000);
         return;
       }
-      
+
       if (maxTags && value.length >= maxTags) {
         setError(`Maximum ${maxTags} tags allowed`);
         setTimeout(() => setError(""), 2000);
         return;
       }
-      
+
       onChange([...value, tag]);
       setInputValue("");
       setError("");
@@ -75,23 +135,28 @@ const TagsInput = React.forwardRef<HTMLInputElement, TagsInputProps>(
         <div
           className={cn(
             "flex items-center min-h-[2.5rem] w-full flex-wrap gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
-            "dark:bg-zinc-950/50 dark:border-zinc-800",
+            // NOT: burada `dark:bg-zinc-950/50 dark:border-zinc-800` hardcode'u
+            // vardı ve aynı satırdaki `bg-background`/`border-input` token'larını
+            // karanlık modda eziyordu. Token'lar zaten dark-mode duyarlı.
             "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
             disabled && "cursor-not-allowed opacity-50",
             className
           )}
         >
           {value.map((tag, index) => (
-            <Badge
-              key={index}
-              variant={variant}
-              className="gap-1 pr-1.5"
-            >
+            <Badge key={index} variant={variant} className="gap-1 pr-1.5">
               <span className="text-xs">{tag}</span>
               {!disabled && (
                 <button
+                  ref={(el) => {
+                    tagButtonRefs.current[index] = el;
+                  }}
                   type="button"
+                  // Buton içeriği yalnızca X ikonu — erişilebilir ad olmadan
+                  // ekran okuyucu hangi etiketin silineceğini söyleyemez.
+                  aria-label={`Remove ${tag}`}
                   onClick={() => removeTag(index)}
+                  onKeyDown={handleTagKeyDown(index)}
                   className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
                 >
                   <X className="h-3 w-3 text-muted-foreground hover:text-foreground transition-colors" />
@@ -100,7 +165,7 @@ const TagsInput = React.forwardRef<HTMLInputElement, TagsInputProps>(
             </Badge>
           ))}
           <input
-            ref={ref}
+            ref={innerInputRef}
             type="text"
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
@@ -108,9 +173,14 @@ const TagsInput = React.forwardRef<HTMLInputElement, TagsInputProps>(
             onBlur={addTag}
             disabled={disabled}
             placeholder={value.length === 0 ? placeholder : ""}
+            // Etiket eklendikçe placeholder kalkıyor; erişilebilir ad olmadan
+            // input tamamen adsız kalıyordu. Tüketici kendi aria-label'ını
+            // verirse aşağıdaki {...props} yayılımı bunu ezer.
+            aria-label="Add tag"
+            aria-describedby={error ? errorId : undefined}
+            aria-invalid={error ? true : undefined}
             className={cn(
               "flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
-              "dark:placeholder:text-zinc-500",
               "min-w-[120px]",
               disabled && "cursor-not-allowed"
             )}
@@ -118,7 +188,9 @@ const TagsInput = React.forwardRef<HTMLInputElement, TagsInputProps>(
           />
         </div>
         {error && (
-          <p className="mt-1 text-xs text-destructive">{error}</p>
+          <p id={errorId} role="status" className="mt-1 text-xs text-destructive">
+            {error}
+          </p>
         )}
       </div>
     );
@@ -127,4 +199,4 @@ const TagsInput = React.forwardRef<HTMLInputElement, TagsInputProps>(
 
 TagsInput.displayName = "TagsInput";
 
-export { TagsInput };
+export { TagsInput };

package/src/components/ui/textarea.tsx

@@ -99,6 +99,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     onChange,
     ...props
   }, ref) => {
+    // Mesaj id'leri `props.id` yoksa sabit string'e düşüyordu -> aynı sayfada
+    // iki id'siz Textarea'da yinelenen DOM id'si oluşuyordu.
+    const reactId = React.useId()
+    const fieldId = props.id || reactId
     const textareaRef = React.useRef<HTMLTextAreaElement>(null)
     const [internalValue, setInternalValue] = React.useState(value || defaultValue || "")
 
@@ -172,8 +176,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             maxLength={maxLength}
             aria-invalid={!!error || undefined}
             aria-describedby={
-              errorMessage ? `${props.id || ''}-error` :
-              successMessage ? `${props.id || ''}-success` :
+              errorMessage ? `${fieldId}-error` :
+              successMessage ? `${fieldId}-success` :
               undefined
             }
             {...props}
@@ -197,8 +201,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
                 messageClassName
               )}
               id={
-                errorMessage ? `${props.id || ''}-error` :
-                successMessage ? `${props.id || ''}-success` :
+                errorMessage ? `${fieldId}-error` :
+                successMessage ? `${fieldId}-success` :
                 undefined
               }
             >