@etus/ui 0.1.0

package/src/components/forms/Form/Form.test.tsx

@@ -0,0 +1,1167 @@
+// Form/Form.test.tsx
+import { render, screen } from "@testing-library/react"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { type ReactNode, useLayoutEffect } from "react"
+import { useForm } from "react-hook-form"
+import { describe, expect, it } from "vitest"
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "./Form"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// TEST HELPERS
+// ============================================
+
+interface TestFormValues {
+  email: string
+  password: string
+}
+
+interface FormWrapperProps {
+  children: ReactNode
+  defaultValues?: Partial<TestFormValues>
+  errors?: Record<string, { message: string; type: string; }>
+}
+
+/**
+ * Wrapper component that provides react-hook-form context for testing
+ */
+function FormWrapper({
+  children,
+  defaultValues = { email: "", password: "" },
+  errors = {},
+}: FormWrapperProps) {
+  const form = useForm<TestFormValues>({
+    defaultValues,
+  })
+
+  // Set errors in useLayoutEffect to avoid React warning about setState during render
+  useLayoutEffect(() => {
+    Object.entries(errors).forEach(([field, error]) => {
+      form.setError(field as keyof TestFormValues, error)
+    })
+  }, [errors, form])
+
+  return <Form {...form}>{children}</Form>
+}
+
+// ============================================
+// FORM PROVIDER TESTS
+// ============================================
+describe("Form", () => {
+  describe("Rendering", () => {
+    it("renders children correctly", () => {
+      function TestComponent() {
+        const form = useForm()
+        return (
+          <Form {...form}>
+            <div data-testid="form-child">Form Content</div>
+          </Form>
+        )
+      }
+      render(<TestComponent />)
+      expect(screen.getByTestId("form-child")).toBeInTheDocument()
+    })
+
+    it("provides form context to children", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem data-testid="form-item">
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <input type="email" />
+                </FormControl>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-item")).toBeInTheDocument()
+    })
+  })
+})
+
+// ============================================
+// FORMFIELD TESTS
+// ============================================
+describe("FormField", () => {
+  describe("Rendering", () => {
+    it("renders field with render prop", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={({ field }) => (
+              <FormItem data-testid="form-item">
+                <FormControl>
+                  <input {...field} data-testid="input" />
+                </FormControl>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("input")).toBeInTheDocument()
+    })
+
+    it("provides field props through render", () => {
+      render(
+        <FormWrapper defaultValues={{ email: "test@example.com" }}>
+          <FormField
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <input {...field} data-testid="input" />
+                </FormControl>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("input")).toHaveValue("test@example.com")
+    })
+  })
+})
+
+// ============================================
+// FORMITEM TESTS
+// ============================================
+describe("FormItem", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem data-testid="form-item">Content</FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-item")).toBeInTheDocument()
+    })
+
+    it("renders children content", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            name="email"
+            render={() => <FormItem>Item Content</FormItem>}
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByText("Item Content")).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem data-testid="form-item">Content</FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-item")).toHaveAttribute(
+        "data-slot",
+        "form-item"
+      )
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem className="custom-class" data-testid="form-item">
+                Content
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-item")).toHaveClass("custom-class")
+    })
+
+    it("has grid layout", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem data-testid="form-item">Content</FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-item")).toHaveClass("grid")
+    })
+  })
+
+  describe("Spacing Variants", () => {
+    it("applies default spacing", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem data-testid="form-item">Content</FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-item")).toHaveClass("gap-2")
+    })
+
+    it("applies tight spacing", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem data-testid="form-item" spacing="tight">
+                Content
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-item")).toHaveClass("gap-1")
+    })
+
+    it("applies loose spacing", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem data-testid="form-item" spacing="loose">
+                Content
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-item")).toHaveClass("gap-3")
+    })
+  })
+})
+
+// ============================================
+// FORMLABEL TESTS
+// ============================================
+describe("FormLabel", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormLabel data-testid="form-label">Email</FormLabel>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-label")).toBeInTheDocument()
+    })
+
+    it("renders as label element", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormLabel data-testid="form-label">Email</FormLabel>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-label").tagName).toBe("LABEL")
+    })
+
+    it("has data-slot attribute", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormLabel data-testid="form-label">Email</FormLabel>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-label")).toHaveAttribute(
+        "data-slot",
+        "form-label"
+      )
+    })
+
+    it("renders children content", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormLabel>Email Address</FormLabel>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByText("Email Address")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormLabel className="custom-class" data-testid="form-label">
+                  Email
+                </FormLabel>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-label")).toHaveClass("custom-class")
+    })
+
+    it("has font-medium styling", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormLabel data-testid="form-label">Email</FormLabel>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-label")).toHaveClass("font-medium")
+    })
+  })
+
+  describe("Error State", () => {
+    it("sets data-error=false when no error", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormLabel data-testid="form-label">Email</FormLabel>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-label")).toHaveAttribute(
+        "data-error",
+        "false"
+      )
+    })
+
+    it("sets data-error=true when field has error", () => {
+      render(
+        <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormLabel data-testid="form-label">Email</FormLabel>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-label")).toHaveAttribute(
+        "data-error",
+        "true"
+      )
+    })
+
+    it("applies text-destructive class on error", () => {
+      render(
+        <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormLabel data-testid="form-label">Email</FormLabel>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-label")).toHaveClass("text-destructive")
+    })
+  })
+})
+
+// ============================================
+// FORMCONTROL TESTS
+// ============================================
+describe("FormControl", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <input {...field} data-testid="input" />
+                </FormControl>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("input")).toBeInTheDocument()
+    })
+
+    it("passes through props to child", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <input {...field} data-testid="input" />
+                </FormControl>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("input")).toHaveAttribute("id")
+    })
+  })
+
+  describe("Accessibility", () => {
+    it("sets aria-invalid=false when no error", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <input {...field} data-testid="input" />
+                </FormControl>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("input")).toHaveAttribute(
+        "aria-invalid",
+        "false"
+      )
+    })
+
+    it("sets aria-invalid=true when field has error", () => {
+      render(
+        <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+          <FormField
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <input {...field} data-testid="input" />
+                </FormControl>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("input")).toHaveAttribute(
+        "aria-invalid",
+        "true"
+      )
+    })
+
+    it("has aria-describedby linking to description", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <input {...field} data-testid="input" />
+                </FormControl>
+                <FormDescription>Enter your email</FormDescription>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      const input = screen.getByTestId("input")
+      const describedBy = input.getAttribute("aria-describedby")
+      expect(describedBy).toContain("-form-item-description")
+    })
+
+    it("has aria-describedby linking to both description and message when error", () => {
+      render(
+        <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+          <FormField
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <input {...field} data-testid="input" />
+                </FormControl>
+                <FormDescription>Enter your email</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      const input = screen.getByTestId("input")
+      const describedBy = input.getAttribute("aria-describedby")
+      expect(describedBy).toContain("-form-item-description")
+      expect(describedBy).toContain("-form-item-message")
+    })
+  })
+})
+
+// ============================================
+// FORMDESCRIPTION TESTS
+// ============================================
+describe("FormDescription", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormDescription data-testid="form-description">
+                  Description
+                </FormDescription>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-description")).toBeInTheDocument()
+    })
+
+    it("renders as p element", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormDescription data-testid="form-description">
+                  Description
+                </FormDescription>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-description").tagName).toBe("P")
+    })
+
+    it("has data-slot attribute", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormDescription data-testid="form-description">
+                  Description
+                </FormDescription>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-description")).toHaveAttribute(
+        "data-slot",
+        "form-description"
+      )
+    })
+
+    it("renders children content", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormDescription>Helper text content</FormDescription>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByText("Helper text content")).toBeInTheDocument()
+    })
+
+    it("has text-muted-foreground styling", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormDescription data-testid="form-description">
+                  Description
+                </FormDescription>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-description")).toHaveClass(
+        "text-muted-foreground"
+      )
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormDescription
+                  className="custom-class"
+                  data-testid="form-description"
+                >
+                  Description
+                </FormDescription>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-description")).toHaveClass("custom-class")
+    })
+
+    it("has ID for accessibility linking", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormDescription data-testid="form-description">
+                  Description
+                </FormDescription>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      const id = screen.getByTestId("form-description").getAttribute("id")
+      expect(id).toContain("-form-item-description")
+    })
+  })
+
+  describe("Size Variants", () => {
+    it("applies default size", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormDescription data-testid="form-description">
+                  Description
+                </FormDescription>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-description")).toHaveClass("text-sm")
+    })
+
+    it("applies small size", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormDescription data-testid="form-description" size="small">
+                  Description
+                </FormDescription>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-description")).toHaveClass("text-xs")
+    })
+  })
+})
+
+// ============================================
+// FORMMESSAGE TESTS
+// ============================================
+describe("FormMessage", () => {
+  describe("Rendering", () => {
+    it("renders correctly when has error", () => {
+      render(
+        <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormMessage data-testid="form-message" />
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-message")).toBeInTheDocument()
+    })
+
+    it("does not render when no error and no children", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormMessage data-testid="form-message" />
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.queryByTestId("form-message")).not.toBeInTheDocument()
+    })
+
+    it("renders as p element", () => {
+      render(
+        <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormMessage data-testid="form-message" />
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-message").tagName).toBe("P")
+    })
+
+    it("has data-slot attribute", () => {
+      render(
+        <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormMessage data-testid="form-message" />
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-message")).toHaveAttribute(
+        "data-slot",
+        "form-message"
+      )
+    })
+
+    it("has role=alert for accessibility", () => {
+      render(
+        <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormMessage data-testid="form-message" />
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-message")).toHaveAttribute(
+        "role",
+        "alert"
+      )
+    })
+
+    it("displays error message from field state", () => {
+      render(
+        <FormWrapper
+          errors={{ email: { type: "required", message: "Email is required" } }}
+        >
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormMessage />
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByText("Email is required")).toBeInTheDocument()
+    })
+
+    it("displays children when no error", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormMessage>Custom message</FormMessage>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByText("Custom message")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormMessage className="custom-class" data-testid="form-message" />
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-message")).toHaveClass("custom-class")
+    })
+
+    it("has text-destructive styling by default", () => {
+      render(
+        <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormMessage data-testid="form-message" />
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-message")).toHaveClass("text-destructive")
+    })
+
+    it("has ID for accessibility linking", () => {
+      render(
+        <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormMessage data-testid="form-message" />
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      const id = screen.getByTestId("form-message").getAttribute("id")
+      expect(id).toContain("-form-item-message")
+    })
+  })
+
+  describe("State Variants", () => {
+    it("applies error state by default", () => {
+      render(
+        <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormMessage data-testid="form-message" />
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-message")).toHaveClass("text-destructive")
+    })
+
+    it("applies success state", () => {
+      render(
+        <FormWrapper>
+          <FormField
+            render={() => (
+              <FormItem>
+                <FormMessage data-testid="form-message" state="success">
+                  Looks good!
+                </FormMessage>
+              </FormItem>
+            )}
+            name="email"
+          />
+        </FormWrapper>
+      )
+      expect(screen.getByTestId("form-message")).toHaveClass("text-success")
+    })
+  })
+})
+
+// ============================================
+// COMBINED COMPONENT TESTS
+// ============================================
+describe("Combined Components", () => {
+  it("renders complete form field with all sub-components", () => {
+    render(
+      <FormWrapper>
+        <FormField
+          render={({ field }) => (
+            <FormItem data-testid="form-item">
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <input {...field} type="email" />
+              </FormControl>
+              <FormDescription>Enter your email address</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+          name="email"
+        />
+      </FormWrapper>
+    )
+    expect(screen.getByTestId("form-item")).toBeInTheDocument()
+    expect(screen.getByText("Email")).toBeInTheDocument()
+    expect(screen.getByText("Enter your email address")).toBeInTheDocument()
+  })
+
+  it("renders multiple form fields", () => {
+    render(
+      <FormWrapper>
+        <FormField
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <input {...field} type="email" />
+              </FormControl>
+            </FormItem>
+          )}
+          name="email"
+        />
+        <FormField
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <input {...field} type="password" />
+              </FormControl>
+            </FormItem>
+          )}
+          name="password"
+        />
+      </FormWrapper>
+    )
+    expect(screen.getByText("Email")).toBeInTheDocument()
+    expect(screen.getByText("Password")).toBeInTheDocument()
+  })
+
+  it("links label to control via htmlFor", () => {
+    render(
+      <FormWrapper>
+        <FormField
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel data-testid="label">Email</FormLabel>
+              <FormControl>
+                <input {...field} data-testid="input" />
+              </FormControl>
+            </FormItem>
+          )}
+          name="email"
+        />
+      </FormWrapper>
+    )
+    const label = screen.getByTestId("label")
+    const input = screen.getByTestId("input")
+    const htmlFor = label.getAttribute("for")
+    const inputId = input.getAttribute("id")
+    expect(htmlFor).toBe(inputId)
+  })
+})
+
+// ============================================
+// ACCESSIBILITY TESTS
+// ============================================
+describe("Accessibility", () => {
+  it("Form field has no accessibility violations", async () => {
+    const { container } = render(
+      <FormWrapper>
+        <FormField
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <input {...field} type="email" />
+              </FormControl>
+            </FormItem>
+          )}
+          name="email"
+        />
+      </FormWrapper>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("Form field with description has no accessibility violations", async () => {
+    const { container } = render(
+      <FormWrapper>
+        <FormField
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <input {...field} type="email" />
+              </FormControl>
+              <FormDescription>Enter your email</FormDescription>
+            </FormItem>
+          )}
+          name="email"
+        />
+      </FormWrapper>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("Form field with error has no accessibility violations", async () => {
+    const { container } = render(
+      <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+        <FormField
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <input {...field} type="email" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+          name="email"
+        />
+      </FormWrapper>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("Complete form with multiple fields has no accessibility violations", async () => {
+    const { container } = render(
+      <FormWrapper>
+        <FormField
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <input {...field} type="email" />
+              </FormControl>
+              <FormDescription>Your primary email</FormDescription>
+            </FormItem>
+          )}
+          name="email"
+        />
+        <FormField
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <input {...field} type="password" />
+              </FormControl>
+              <FormDescription>At least 8 characters</FormDescription>
+            </FormItem>
+          )}
+          name="password"
+        />
+      </FormWrapper>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("FormMessage has role=alert", () => {
+    render(
+      <FormWrapper errors={{ email: { type: "required", message: "Required" } }}>
+        <FormField
+          render={() => (
+            <FormItem>
+              <FormMessage />
+            </FormItem>
+          )}
+          name="email"
+        />
+      </FormWrapper>
+    )
+    expect(screen.getByRole("alert")).toBeInTheDocument()
+  })
+
+  it("Label is properly associated with input", () => {
+    render(
+      <FormWrapper>
+        <FormField
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email Address</FormLabel>
+              <FormControl>
+                <input {...field} type="email" />
+              </FormControl>
+            </FormItem>
+          )}
+          name="email"
+        />
+      </FormWrapper>
+    )
+    expect(screen.getByLabelText("Email Address")).toBeInTheDocument()
+  })
+})