Accessible Form

import React, { useRef, useState } from "react";
import "./AccessibleForm.css";

/**
 * AccessibleForm — form shell with:
 *  - noValidate (we control messages)
 *  - error-summary pattern (focus moves to it on invalid submit)
 *  - automatic aria-invalid + aria-describedby wiring per field
 */
export default function AccessibleForm({
  fields,              // [{ id, label, type, required, autocomplete, validate, help }]
  onSubmit,
  submitLabel = "Submit",
}) {
  const [values, setValues] = useState(
    Object.fromEntries(fields.map((f) => [f.id, ""]))
  );
  const [errors, setErrors] = useState({});
  const summaryRef = useRef(null);

  function runValidate() {
    const next = {};
    for (const f of fields) {
      if (f.required && !values[f.id]) {
        next[f.id] = `${f.label} is required.`;
      } else if (f.validate) {
        const msg = f.validate(values[f.id]);
        if (msg) next[f.id] = msg;
      }
    }
    return next;
  }

  function handleSubmit(e) {
    e.preventDefault();
    const next = runValidate();
    setErrors(next);
    if (Object.keys(next).length) {
      setTimeout(() => summaryRef.current?.focus(), 0);
    } else {
      onSubmit?.(values);
    }
  }

  const errorKeys = Object.keys(errors);

  return (
    <form noValidate onSubmit={handleSubmit}>
      {errorKeys.length > 0 && (
        <div
          ref={summaryRef}
          role="alert"
          tabIndex={-1}
          className="err-summary"
          aria-labelledby="err-summary-title"
        >
          <strong id="err-summary-title">
            There {errorKeys.length === 1 ? "is 1 problem" : `are ${errorKeys.length} problems`}
          </strong>
          <ul>
            {errorKeys.map((k) => (
              <li key={k}><a href={`#${k}`}>{errors[k]}</a></li>
            ))}
          </ul>
        </div>
      )}

      {fields.map((f) => (
        <label key={f.id} className="field" htmlFor={f.id}>
          <span>
            {f.label}
            {f.required && <span className="req" aria-hidden="true"> *</span>}
          </span>
          <input
            id={f.id}
            type={f.type || "text"}
            autoComplete={f.autocomplete}
            required={f.required}
            aria-invalid={!!errors[f.id]}
            aria-describedby={[
              f.help ? `${f.id}-help` : null,
              errors[f.id] ? `${f.id}-err` : null,
            ].filter(Boolean).join(" ") || undefined}
            value={values[f.id]}
            onChange={(e) => setValues((v) => ({ ...v, [f.id]: e.target.value }))}
          />
          {f.help && <span id={`${f.id}-help`} className="help">{f.help}</span>}
          {errors[f.id] && (
            <span id={`${f.id}-err`} className="err">{errors[f.id]}</span>
          )}
        </label>
      ))}

      <button type="submit">{submitLabel}</button>
    </form>
  );
}

import AccessibleForm from "./AccessibleForm";

const FIELDS = [
  { id: "name",     label: "Full name", autocomplete: "name",         required: true },
  { id: "email",    label: "Email",     autocomplete: "email",        required: true, type: "email",
    validate: v => /^\S+@\S+\.\S+$/.test(v) ? null : "Enter a valid email." },
  { id: "password", label: "Password",  autocomplete: "new-password", required: true, type: "password",
    validate: v => v.length >= 8 ? null : "Password must be at least 8 characters.",
    help: "At least 8 characters." },
];

export default function SignupPage() {
  return (
    <AccessibleForm
      fields={FIELDS}
      submitLabel="Create account"
      onSubmit={(values) => fetch("/api/signup", {
        method: "POST", body: JSON.stringify(values)
      })}
    />
  );
}