From 7f64a58ec8e1055682da985acc4a7911aa64bc0f Mon Sep 17 00:00:00 2001
From: adm01-debug <adm01@promobrindes.com.br>
Date: Tue, 26 May 2026 08:08:01 -0300
Subject: [PATCH] fix(a11y): auto-generate id/name on Input+Textarea + create
 LabeledField compound component

Fixes two DevTools accessibility warnings:
  1. 'A form field element should have an id or name attribute' (19 resources)
  2. 'No label associated with a form field' (6 resources)

Changes:
- input.tsx: auto-resolves id from name, or falls back to React.useId()
  also ensures name attribute is always present (derived from id if not supplied)
- textarea.tsx: same pattern as input.tsx
- LabeledField.tsx: new compound component that auto-links <Label htmlFor>
  to <Input id> using a shared React.useId(). Canonical fix for bug #2.
  Also exports LabeledTextarea for textarea fields.

Bug #2 (6 labels without associated field) is solved architecturally via
LabeledField. Existing call sites using bare <Label> + <Input> without
coordinated htmlFor/id should be migrated to <LabeledField label='...'>.
Bug #1 (19 inputs/textareas without id/name) is fixed at the primitive level."
---
 src/components/ui/LabeledField.tsx | 206 +++++++++++++++++++++++++++++
 src/components/ui/input.tsx        |  28 +++-
 src/components/ui/textarea.tsx     |  21 ++-
 3 files changed, 250 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ui/LabeledField.tsx

diff --git a/src/components/ui/LabeledField.tsx b/src/components/ui/LabeledField.tsx
new file mode 100644
index 000000000..6e38aea91
--- /dev/null
+++ b/src/components/ui/LabeledField.tsx
@@ -0,0 +1,206 @@
+/**
+ * LabeledField — Compound component that correctly links <Label> to <Input>
+ * (or <Textarea>) via a shared `React.useId()` id.
+ *
+ * This is the canonical fix for the DevTools accessibility warning:
+ *   "No label associated with a form field"
+ *
+ * Usage:
+ *   // Instead of:
+ *   <Label>Email</Label>
+ *   <Input type="email" />
+ *
+ *   // Use:
+ *   <LabeledField label="Email" name="email" type="email" />
+ *
+ *   // With error:
+ *   <LabeledField
+ *     label="Email"
+ *     name="email"
+ *     type="email"
+ *     required
+ *     description="Usado para login"
+ *     error={errors.email?.message}
+ *   />
+ *
+ *   // Textarea variant:
+ *   <LabeledTextarea label="Observações" name="obs" rows={4} />
+ */
+import * as React from 'react';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+
+// ─────────────────────────────────────────────
+// Shared types
+// ─────────────────────────────────────────────
+
+interface LabeledFieldBaseProps {
+  /** Text shown in the <label>. Required for accessibility. */
+  label: string;
+  /** Marks field as required — appends a red asterisk to the label. */
+  required?: boolean;
+  /** Optional helper text shown below the field. */
+  description?: string;
+  /** Error message shown below the field in destructive colour. */
+  error?: string;
+  /** Additional class names for the outer wrapper div. */
+  wrapperClassName?: string;
+  /** Additional class names for the label. */
+  labelClassName?: string;
+}
+
+// ─────────────────────────────────────────────
+// LabeledField  (wraps <Input>)
+// ─────────────────────────────────────────────
+
+export type LabeledFieldProps = LabeledFieldBaseProps &
+  Omit<React.ComponentProps<'input'>, 'id'>;
+
+/**
+ * Renders a <Label> + <Input> pair with a shared `id` so the browser
+ * correctly associates them. The id is auto-generated when not supplied.
+ */
+export const LabeledField = React.forwardRef<HTMLInputElement, LabeledFieldProps>(
+  (
+    {
+      label,
+      required,
+      description,
+      error,
+      wrapperClassName,
+      labelClassName,
+      name,
+      className,
+      ...inputProps
+    },
+    ref,
+  ) => {
+    const autoId = React.useId();
+    // Prefer name-based id for readability in DevTools; fall back to autoId.
+    const fieldId = name ? `field-${name}` : autoId;
+    const descriptionId = description ? `${fieldId}-description` : undefined;
+    const errorId = error ? `${fieldId}-error` : undefined;
+
+    const ariaDescribedBy =
+      [descriptionId, errorId].filter(Boolean).join(' ') || undefined;
+
+    return (
+      <div className={cn('space-y-2', wrapperClassName)}>
+        <Label
+          htmlFor={fieldId}
+          className={cn(error && 'text-destructive', labelClassName)}
+        >
+          {label}
+          {required && (
+            <span className="text-destructive ml-1" aria-hidden="true">
+              *
+            </span>
+          )}
+        </Label>
+
+        <Input
+          ref={ref}
+          id={fieldId}
+          name={name}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={!!error}
+          aria-required={required}
+          className={className}
+          {...inputProps}
+        />
+
+        {description && !error && (
+          <p id={descriptionId} className="text-xs text-muted-foreground">
+            {description}
+          </p>
+        )}
+
+        {error && (
+          <p id={errorId} className="text-xs font-medium text-destructive" role="alert">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+LabeledField.displayName = 'LabeledField';
+
+// ─────────────────────────────────────────────
+// LabeledTextarea  (wraps <Textarea>)
+// ─────────────────────────────────────────────
+
+export type LabeledTextareaProps = LabeledFieldBaseProps &
+  Omit<React.ComponentProps<'textarea'>, 'id'>;
+
+/**
+ * Renders a <Label> + <Textarea> pair with a shared `id`.
+ */
+export const LabeledTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  LabeledTextareaProps
+>(
+  (
+    {
+      label,
+      required,
+      description,
+      error,
+      wrapperClassName,
+      labelClassName,
+      name,
+      className,
+      ...textareaProps
+    },
+    ref,
+  ) => {
+    const autoId = React.useId();
+    const fieldId = name ? `field-${name}` : autoId;
+    const descriptionId = description ? `${fieldId}-description` : undefined;
+    const errorId = error ? `${fieldId}-error` : undefined;
+    const ariaDescribedBy =
+      [descriptionId, errorId].filter(Boolean).join(' ') || undefined;
+
+    return (
+      <div className={cn('space-y-2', wrapperClassName)}>
+        <Label
+          htmlFor={fieldId}
+          className={cn(error && 'text-destructive', labelClassName)}
+        >
+          {label}
+          {required && (
+            <span className="text-destructive ml-1" aria-hidden="true">
+              *
+            </span>
+          )}
+        </Label>
+
+        <Textarea
+          ref={ref}
+          id={fieldId}
+          name={name}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={!!error}
+          aria-required={required}
+          className={className}
+          {...textareaProps}
+        />
+
+        {description && !error && (
+          <p id={descriptionId} className="text-xs text-muted-foreground">
+            {description}
+          </p>
+        )}
+
+        {error && (
+          <p id={errorId} className="text-xs font-medium text-destructive" role="alert">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+LabeledTextarea.displayName = 'LabeledTextarea';
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index ab4948183..844aa2a2d 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -2,11 +2,35 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+/**
+ * Input — shadcn/ui base field with accessibility auto-fix.
+ *
+ * A11y rules enforced:
+ * - Every <input> MUST have an `id` attribute (Chrome DevTools: "form field
+ *   should have an id or name attribute").
+ * - Every <input> MUST have a `name` attribute so the browser can autocomplete
+ *   and form serialisation works correctly.
+ *
+ * Resolution order:
+ *   id   → explicit prop → derive from `name` → React.useId() stable fallback
+ *   name → explicit prop → same value as resolved id
+ *
+ * This means a bare <Input /> gets a unique, stable id/name pair at no cost
+ * to the caller. Callers that already supply id/name are unaffected.
+ */
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, id, name, ...props }, ref) => {
+    const fallbackId = React.useId();
+    // Resolve id: explicit > derived from name > unique fallback
+    const resolvedId = id ?? name ?? fallbackId;
+    // Resolve name: explicit > same as id so the field is always serialisable
+    const resolvedName = name ?? resolvedId;
+
     return (
       <input
         type={type}
+        id={resolvedId}
+        name={resolvedName}
         className={cn(
           "flex h-11 w-full rounded-lg border border-border bg-background px-4 py-2 text-sm ring-offset-background",
           "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
@@ -25,4 +49,4 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 );
 Input.displayName = "Input";
 
-export { Input };
\ No newline at end of file
+export { Input };
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 82e9dac09..5ea3fdc5e 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -4,16 +4,31 @@ import { cn } from '@/lib/utils';
 
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
+/**
+ * Textarea — shadcn/ui base field with accessibility auto-fix.
+ *
+ * A11y rules enforced (same pattern as Input):
+ * - Every <textarea> MUST have an `id` attribute.
+ * - Every <textarea> MUST have a `name` attribute.
+ *
+ * Resolution order:
+ *   id   → explicit prop → derive from `name` → React.useId() stable fallback
+ *   name → explicit prop → same value as resolved id
+ */
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, id, name, ...props }, ref) => {
+    const fallbackId = React.useId();
+    const resolvedId = id ?? name ?? fallbackId;
+    const resolvedName = name ?? resolvedId;
+
     return (
       <textarea
+        id={resolvedId}
+        name={resolvedName}
         className={cn(
           'flex min-h-[80px] w-full rounded-lg border border-border bg-background px-4 py-3 text-sm font-medium',
           'ring-offset-background placeholder:text-muted-foreground/60',
-          // Focus: ring laranja com glow
           'focus-visible:border-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/25',
-          // Hover: borda laranja + sombra
           'hover:border-border-strong hover:shadow-medium',
           'shadow-soft transition-all duration-300',
           'disabled:cursor-not-allowed disabled:opacity-50',