Accessible Form Implementation Patterns

# Accessible Form Implementation Patterns for Google Antigravity

Accessibility ensures everyone can use your forms. This guide establishes patterns for building WCAG-compliant forms with React Hook Form in Google Antigravity projects.

## Accessible Input Component

```typescript
import { forwardRef, InputHTMLAttributes } from "react";

interface AccessibleInputProps extends InputHTMLAttributes<HTMLInputElement> {
  label: string;
  error?: string;
  hint?: string;
}

export const AccessibleInput = forwardRef<HTMLInputElement, AccessibleInputProps>(
  ({ label, error, hint, id, ...props }, ref) => {
    const inputId = id || props.name;
    const errorId = `${inputId}-error`;
    const hintId = `${inputId}-hint`;
    const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || undefined;

    return (
      <div className="space-y-1">
        <label htmlFor={inputId} className="block font-medium">
          {label}
          {props.required && <span className="text-red-500" aria-hidden="true"> *</span>}
          {props.required && <span className="sr-only">(required)</span>}
        </label>
        
        {hint && <p id={hintId} className="text-sm text-gray-500">{hint}</p>}
        
        <input
          ref={ref}
          id={inputId}
          aria-invalid={!!error}
          aria-describedby={describedBy}
          className={`w-full border rounded-lg px-4 py-2 ${error ? "border-red-500" : "border-gray-300"}`}
          {...props}
        />
        
        {error && (
          <p id={errorId} role="alert" className="text-sm text-red-600">
            {error}
          </p>
        )}
      </div>
    );
  }
);
```

## Form with Keyboard Navigation

```typescript
"use client";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("Please enter a valid email"),
  message: z.string().min(10, "Message must be at least 10 characters"),
});

export function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(console.log)} aria-label="Contact form" noValidate>
      <fieldset>
        <legend className="sr-only">Contact Information</legend>
        
        <AccessibleInput
          label="Email Address"
          type="email"
          error={errors.email?.message}
          {...register("email")}
        />
        
        <div className="mt-4">
          <label htmlFor="message" className="block font-medium">Message</label>
          <textarea
            id="message"
            aria-invalid={!!errors.message}
            aria-describedby={errors.message ? "message-error" : undefined}
            className="w-full border rounded-lg px-4 py-2"
            rows={4}
            {...register("message")}
          />
          {errors.message && (
            <p id="message-error" role="alert" className="text-red-600">
              {errors.message.message}
            </p>
          )}
        </div>
      </fieldset>

      <button type="submit" className="mt-4 bg-blue-600 text-white px-6 py-2 rounded-lg">
        Send Message
      </button>
    </form>
  );
}
```

## Best Practices

1. **Labels**: Always associate labels with inputs
2. **Error messages**: Use role="alert" for errors
3. **aria-describedby**: Link hints and errors
4. **aria-invalid**: Indicate invalid fields
5. **Keyboard navigation**: Ensure tab order is logical