@moontra/moonui 4.0.0 → 5.0.0

package/src/components/ui/aspect-ratio.tsx

@@ -17,11 +17,15 @@ const aspectRatioVariants = cva(
   "relative overflow-hidden",
   {
     variants: {
+      // `variant` yalnız yüzey/kenarlık eksenini yönetir. Önceden her varyant
+      // ayrıca `rounded-md` taşıyordu ve `radius` ekseniyle çakışıyordu
+      // (aynı anda iki `rounded-*` sınıfı üretiliyordu). Köşe yuvarlaması artık
+      // TEK kaynaktan: `radius`.
       variant: {
-        default: "rounded-md bg-muted/10",
+        default: "bg-muted/10",
         ghost: "bg-transparent",
-        outline: "rounded-md border border-border",
-        card: "rounded-md bg-card shadow-sm",
+        outline: "border border-border",
+        card: "bg-card shadow-sm",
       },
       radius: {
         none: "rounded-none",
@@ -33,6 +37,8 @@ const aspectRatioVariants = cva(
     },
     defaultVariants: {
       variant: "default",
+      // Önceki davranış korunur: her varyant `rounded-md` taşıyordu.
+      radius: "md",
     },
   }
 )

package/src/components/ui/badge.tsx

@@ -51,16 +51,16 @@ const badgeVariants = cva(
           "dark:bg-error/90 dark:text-white dark:shadow-inner dark:shadow-error/10",
         ],
         success: [
-          "border-transparent bg-success text-white",
+          "border-transparent bg-success text-success-foreground",
           "hover:bg-success/90 dark:hover:bg-success/80",
           "focus-visible:ring-success/30 dark:focus-visible:ring-success/25",
-          "dark:bg-success/90 dark:text-white dark:shadow-inner dark:shadow-success/10",
+          "dark:bg-success/90 dark:text-success-foreground dark:shadow-inner dark:shadow-success/10",
         ],
         warning: [
-          "border-transparent bg-warning text-white",
+          "border-transparent bg-warning text-warning-foreground",
           "hover:bg-warning/90 dark:hover:bg-warning/80",
           "focus-visible:ring-warning/30 dark:focus-visible:ring-warning/25",
-          "dark:bg-warning/90 dark:text-gray-900 dark:shadow-inner dark:shadow-warning/10",
+          "dark:bg-warning/90 dark:text-warning-foreground dark:shadow-inner dark:shadow-warning/10",
         ],
         ghost: [
           "border border-gray-200 bg-gray-50/50 text-gray-700",

package/src/components/ui/button.tsx

@@ -205,6 +205,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={cn("moonui-theme", buttonVariants({ variant, size, rounded, fullWidth, className }))}
         ref={ref}
         disabled={disabled || loading}
+        // Görsel spinner + data-loading vardı ama yardımcı teknolojiye meşgul
+        // durumu hiç duyurulmuyordu.
+        aria-busy={loading || undefined}
         data-loading={loading ? "" : undefined}
         {...props}
       >

package/src/components/ui/date-picker.tsx

@@ -121,7 +121,12 @@ export interface DatePickerProps
   calendarProps?: React.ComponentProps<typeof Calendar>;
 }
 
-export function DatePicker({
+// NOT (issue #264): dört seçici de düz fonksiyondu, ref geçme yolu yoktu.
+// Her biri KENDİ gerçek kök DOM elemanına bağlanır — DOM yapısı değişmez.
+// DatePicker/DateTimePicker kök bir <div> render eder; DateRangePicker ve
+// MonthPicker'ın kökü Radix `Popover`'dır ve kendisi DOM üretmez, bu yüzden
+// onlarda ref tetikleyici butona gider.
+export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(function DatePicker({
   className,
   variant,
   size,
@@ -143,7 +148,7 @@ export function DatePicker({
   calendarProps,
   disabled,
   ...props
-}: DatePickerProps) {
+}: DatePickerProps, ref: React.ForwardedRef<HTMLDivElement>) {
   const [open, setOpen] = React.useState(false);
   const [internalDate, setInternalDate] = React.useState<Date | undefined>(value);
 
@@ -163,7 +168,11 @@ export function DatePicker({
     }
   };
 
-  const handleClear = (e: React.MouseEvent) => {
+  // Hem fare hem klavye (Enter/Space) yolundan çağrılıyor; yalnızca
+  // `stopPropagation` kullanıldığı için ortak taban tipi yeterli.
+  // (Önceden `React.MouseEvent` bekliyordu ve klavye yolunda `as any` ile
+  // zorlanıyordu.)
+  const handleClear = (e: React.SyntheticEvent) => {
     e.stopPropagation();
     handleSelect(undefined);
   };
@@ -188,7 +197,7 @@ export function DatePicker({
   const iconElement = icon || <CalendarIcon className="h-4 w-4" />;
 
   return (
-    <div className="moonui-theme">
+    <div ref={ref} className="moonui-theme">
       <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
@@ -231,7 +240,7 @@ export function DatePicker({
               onKeyDown={(e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                   e.preventDefault();
-                  handleClear(e as any);
+                  handleClear(e);
                 }
               }}
             >
@@ -255,7 +264,7 @@ export function DatePicker({
         </Button>
       </PopoverTrigger>
       <PopoverContent 
-        className="w-[360px] p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm !z-[9999]" 
+        className="w-[360px] p-0 shadow-2xl rounded-2xl border border-border bg-background/95 backdrop-blur-sm !z-[9999]" 
         align="start"
         sideOffset={12}
       >
@@ -289,7 +298,8 @@ export function DatePicker({
     </Popover>
     </div>
   );
-}
+});
+DatePicker.displayName = "DatePicker";
 
 /**
  * DateRangePicker Component
@@ -313,7 +323,7 @@ export interface DateRangePickerProps
   separator?: string;
 }
 
-export function DateRangePicker({
+export const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePickerProps>(function DateRangePicker({
   className,
   value,
   onChange,
@@ -321,7 +331,7 @@ export function DateRangePicker({
   formatString = "LLL dd, y",
   separator = " - ",
   ...props
-}: DateRangePickerProps) {
+}: DateRangePickerProps, ref: React.ForwardedRef<HTMLButtonElement>) {
   const [open, setOpen] = React.useState(false);
   const [internalRange, setInternalRange] = React.useState(value);
 
@@ -352,6 +362,7 @@ export function DateRangePicker({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
+          ref={ref}
           variant={props.variant === "ghost" ? "ghost" : "outline"}
           className={cn(
             datePickerVariants({ 
@@ -370,7 +381,7 @@ export function DateRangePicker({
           </span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm !z-[9999]" align="start" sideOffset={12}>
+      <PopoverContent className="w-auto p-0 shadow-2xl rounded-2xl border border-border bg-background/95 backdrop-blur-sm !z-[9999]" align="start" sideOffset={12}>
         <Calendar
           mode="range"
           defaultMonth={internalRange?.from}
@@ -383,7 +394,8 @@ export function DateRangePicker({
       </PopoverContent>
     </Popover>
   );
-}
+});
+DateRangePicker.displayName = "DateRangePicker";
 
 /**
  * DateTimePicker Component
@@ -406,7 +418,7 @@ export interface DateTimePickerProps extends DatePickerProps {
   timeInterval?: number;
 }
 
-export function DateTimePicker({
+export const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(function DateTimePicker({
   value,
   onChange,
   formatString = "PPP p",
@@ -414,7 +426,7 @@ export function DateTimePicker({
   timeFormat = "24",
   timeInterval = 15,
   ...props
-}: DateTimePickerProps) {
+}: DateTimePickerProps, ref: React.ForwardedRef<HTMLDivElement>) {
   const [date, setDate] = React.useState<Date | undefined>(value);
   const [time, setTime] = React.useState<string>(
     value ? format(value, timeFormat === "24" ? "HH:mm" : "hh:mm a") : "00:00"
@@ -469,7 +481,7 @@ export function DateTimePicker({
   }, [timeFormat, timeInterval]);
 
   return (
-    <div className="flex flex-col gap-2">
+    <div ref={ref} className="flex flex-col gap-2">
       <DatePicker
         {...props}
         value={date}
@@ -500,7 +512,8 @@ export function DateTimePicker({
       )}
     </div>
   );
-}
+});
+DateTimePicker.displayName = "DateTimePicker";
 
 /**
  * MonthPicker Component
@@ -515,13 +528,13 @@ export interface MonthPickerProps extends Omit<DatePickerProps, "formatString">
   formatString?: string;
 }
 
-export function MonthPicker({
+export const MonthPicker = React.forwardRef<HTMLButtonElement, MonthPickerProps>(function MonthPicker({
   value,
   onChange,
   placeholder = "Pick a month",
   formatString = "MMMM yyyy",
   ...props
-}: MonthPickerProps) {
+}: MonthPickerProps, ref: React.ForwardedRef<HTMLButtonElement>) {
   const [open, setOpen] = React.useState(false);
   const [viewDate, setViewDate] = React.useState(value || new Date());
 
@@ -550,6 +563,7 @@ export function MonthPicker({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
+          ref={ref}
           variant={props.variant === "default" ? "outline" : (props.variant || "outline")}
           className={cn(
             datePickerVariants({ 
@@ -566,12 +580,15 @@ export function MonthPicker({
           {displayValue || placeholder}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-64 p-0 shadow-2xl border border-gray-200 dark:border-gray-700 bg-background !z-[9999]" align="start">
+      <PopoverContent className="w-64 p-0 shadow-2xl border border-border bg-background !z-[9999]" align="start">
         <div className="p-3">
           <div className="flex items-center justify-between mb-3">
+            {/* İkon-only butonlar: erişilebilir ad olmadan ekran okuyucu
+                yalnızca "button" der, hangi yöne gidileceği anlaşılmaz. */}
             <Button
               variant="outline"
               size="icon"
+              aria-label={`Previous year, ${viewDate.getFullYear() - 1}`}
               onClick={() => handleYearChange(-1)}
             >
               <ChevronLeft className="h-4 w-4" />
@@ -582,6 +599,7 @@ export function MonthPicker({
             <Button
               variant="outline"
               size="icon"
+              aria-label={`Next year, ${viewDate.getFullYear() + 1}`}
               onClick={() => handleYearChange(1)}
             >
               <ChevronRight className="h-4 w-4" />
@@ -604,7 +622,8 @@ export function MonthPicker({
       </PopoverContent>
     </Popover>
   );
-}
+});
+MonthPicker.displayName = "MonthPicker";
 
 // Re-export utilities
 export { format } from "date-fns";

package/src/components/ui/file-upload.tsx

@@ -325,6 +325,10 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
             multiple={multiple}
             disabled={disabled}
             onChange={handleFileSelect}
+            // Input görsel olarak gizli (opacity-0) ve ilişkili bir <label>'ı
+            // yok — erişilebilir ad olmadan ekran okuyucu bunu adsız bir dosya
+            // alanı olarak duyuruyordu.
+            aria-label={multiple ? "Choose files to upload" : "Choose a file to upload"}
             className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
           />
           

package/src/components/ui/index.ts

@@ -257,6 +257,10 @@ export type {
 // Label
 export { Label as MoonUILabel } from "./label";
 
+export type {
+    LabelProps as MoonUILabelProps,
+} from "./label";
+
 // LockedComponent
 export {
     LockedComponent as MoonUILockedComponent,
@@ -352,6 +356,10 @@ export { Separator as MoonUISeparator } from "./separator";
 // SimpleEditor
 export { SimpleEditor as MoonUISimpleEditor } from "./simple-editor";
 
+export type {
+    SimpleEditorProps as MoonUISimpleEditorProps,
+} from "./simple-editor";
+
 // Skeleton
 export {
     Skeleton as MoonUISkeleton,
@@ -406,6 +414,14 @@ export {
 // TagsInput
 export { TagsInput as MoonUITagsInput } from "./tags-input";
 
+export type {
+    TagsInputProps as MoonUITagsInputProps,
+} from "./tags-input";
+
+export type {
+    ToggleProps as MoonUIToggleProps,
+} from "./toggle";
+
 // Textarea
 export { Textarea as MoonUITextarea } from "./textarea";
 

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

@@ -32,6 +32,11 @@ const InputOTP = React.forwardRef<
 >(({ className, containerClassName, ...props }, ref) => (
   <OTPInput
     ref={ref}
+    // input-otp gerçek girişi görsel olarak gizli bir <input> ile yapar ve o
+    // input'un ilişkili bir <label>'ı yok — erişilebilir ad olmadan ekran
+    // okuyucu adsız bir metin alanı duyuruyordu. Tüketici kendi aria-label'ını
+    // verirse aşağıdaki {...props} yayılımı bunu ezer.
+    aria-label="One-time password"
     containerClassName={cn(
       "moonui-theme",
       "flex items-center gap-2 has-[:disabled]:opacity-50",

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/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/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
               }
             >