Coder un formulaire accessible en HTML et React

<label for="fin">Date de retour</label>
<p id="fin-aide">15 jours au maximum, premier et dernier jour compris.</p>
<input type="date" id="fin" name="fin" required
       aria-invalid="true" aria-describedby="fin-aide fin-erreur">
<p id="fin-erreur" class="champ-erreur">
  <span aria-hidden="true">⚠</span>
  Choisissez une date de retour au plus tard le 26/03/2027 : un prêt dure 15 jours au maximum.
</p>

<div class="recapitulatif" tabindex="-1">
  <h2>2 erreurs empêchent l'envoi</h2>
  <ul>
    <li><a href="#debut">Indiquez la date de retrait.</a></li>
    <li><a href="#fin">Choisissez une date de retour au plus tard le 26/03/2027 : un prêt dure 15 jours au maximum.</a></li>
  </ul>
</div>

// src/composants/Champ.tsx
import { useId, type InputHTMLAttributes } from 'react';

type ChampProps = InputHTMLAttributes<HTMLInputElement> & {
  libelle: string;
  aide?: string;
  erreur?: string;
};

export function Champ({ libelle, aide, erreur, id, ...autres }: ChampProps) {
  const idAuto = useId();
  const idChamp = id ?? idAuto;
  const idAide = `${idChamp}-aide`;
  const idErreur = `${idChamp}-erreur`;
  // L'aide, puis l'erreur, sont lues par le lecteur d'écran quand le champ reçoit le focus.
  const decritPar = [aide && idAide, erreur && idErreur].filter(Boolean).join(' ');

  return (
    <div className="champ">
      <label htmlFor={idChamp}>{libelle}</label>
      {aide && <p id={idAide} className="champ-aide">{aide}</p>}
      <input
        {...autres}
        id={idChamp}
        aria-invalid={erreur ? true : undefined}
        aria-describedby={decritPar || undefined}
      />
      {erreur && (
        <p id={idErreur} className="champ-erreur">
          <span aria-hidden="true">⚠ </span>
          {erreur}
        </p>
      )}
    </div>
  );
}

// src/regles/validerReservation.ts
export type Saisie = { debut: string; fin: string; motif: string };
export type Erreurs = { debut?: string; fin?: string };

const DUREE_MAX = 15; // jours, premier et dernier compris
const MS_PAR_JOUR = 24 * 60 * 60 * 1000;

// Les dates circulent au format AAAA-MM-JJ, celui de <input type="date">.
function numeroDeJour(dateIso: string): number {
  const [annee, mois, jour] = dateIso.split('-').map(Number);
  return Date.UTC(annee, mois - 1, jour) / MS_PAR_JOUR;
}

function ajouterJours(dateIso: string, jours: number): string {
  return new Date((numeroDeJour(dateIso) + jours) * MS_PAR_JOUR).toISOString().slice(0, 10);
}

// « 2027-03-26 » devient « 26/03/2027 », le format des utilisateurs.
export function enFrancais(dateIso: string): string {
  const [annee, mois, jour] = dateIso.split('-');
  return `${jour}/${mois}/${annee}`;
}

export function validerReservation(s: Saisie, aujourdhui: string): Erreurs {
  const erreurs: Erreurs = {};
  if (s.debut === '') {
    erreurs.debut = 'Indiquez la date de retrait.';
  } else if (s.debut < aujourdhui) {
    erreurs.debut = `Choisissez une date de retrait à partir du ${enFrancais(aujourdhui)}.`;
  }
  if (s.fin === '') {
    erreurs.fin = 'Indiquez la date de retour.';
  } else if (s.debut !== '' && s.fin < s.debut) {
    erreurs.fin = 'Choisissez une date de retour égale ou postérieure à la date de retrait.';
  } else if (s.debut !== '' && numeroDeJour(s.fin) - numeroDeJour(s.debut) + 1 > DUREE_MAX) {
    const dateMax = enFrancais(ajouterJours(s.debut, DUREE_MAX - 1));
    erreurs.fin = `Choisissez une date de retour au plus tard le ${dateMax} : un prêt dure 15 jours au maximum.`;
  }
  return erreurs;
}

// src/pages/Reserver.tsx
import { useEffect, useRef, useState, type FormEvent } from 'react';
import { Champ } from '../composants/Champ';
import { validerReservation, type Erreurs, type Saisie } from '../regles/validerReservation';

type Resultat = { ok: true } | { ok: false; message: string };

type Props = {
  materiel: string;
  aujourdhui: string; // AAAA-MM-JJ
  envoyer: (saisie: Saisie) => Promise<Resultat>; // en cas de succès, le parent affiche la confirmation
};

export function Reserver({ materiel, aujourdhui, envoyer }: Props) {
  const [saisie, setSaisie] = useState<Saisie>({ debut: '', fin: '', motif: '' });
  const [erreurs, setErreurs] = useState<Erreurs>({});
  const [envoiEnCours, setEnvoiEnCours] = useState(false);
  const [echec, setEchec] = useState('');
  const [tentativesRefusees, setTentativesRefusees] = useState(0);
  const recapitulatif = useRef<HTMLDivElement>(null);

  // Après un envoi refusé, le focus va sur le récapitulatif : le lecteur d'écran le lit.
  useEffect(() => {
    if (tentativesRefusees > 0) recapitulatif.current?.focus();
  }, [tentativesRefusees]);

  function modifier(champ: keyof Saisie, valeur: string) {
    const nouvelle = { ...saisie, [champ]: valeur };
    setSaisie(nouvelle);
    // Une erreur déjà affichée disparaît dès que la saisie est corrigée.
    if (champ !== 'motif' && erreurs[champ]) {
      setErreurs({ ...erreurs, [champ]: validerReservation(nouvelle, aujourdhui)[champ] });
    }
  }

  // À la sortie d'un champ rempli, on vérifie ce champ seulement.
  function verifier(champ: 'debut' | 'fin') {
    if (saisie[champ] === '') return; // un champ vide n'est signalé qu'à l'envoi
    setErreurs({ ...erreurs, [champ]: validerReservation(saisie, aujourdhui)[champ] });
  }

  async function soumettre(evenement: FormEvent<HTMLFormElement>) {
    evenement.preventDefault();
    if (envoiEnCours) return; // pas de double envoi
    const nouvelles = validerReservation(saisie, aujourdhui);
    setErreurs(nouvelles);
    if (Object.keys(nouvelles).length > 0) {
      setTentativesRefusees((n) => n + 1);
      return;
    }
    setEchec('');
    setEnvoiEnCours(true);
    const resultat = await envoyer(saisie);
    setEnvoiEnCours(false);
    if (!resultat.ok) setEchec(resultat.message); // la saisie est conservée
  }

  const liste = (['debut', 'fin'] as const).filter((champ) => erreurs[champ]);

  return (
    <main>
      <h1>Réserver {materiel}</h1>
      <p>Tous les champs sont obligatoires, sauf le motif.</p>

      {tentativesRefusees > 0 && liste.length > 0 && (
        <div ref={recapitulatif} tabIndex={-1} className="recapitulatif">
          <h2>{liste.length === 1 ? "1 erreur empêche l'envoi" : `${liste.length} erreurs empêchent l'envoi`}</h2>
          <ul>
            {liste.map((champ) => (
              <li key={champ}>
                <a
                  href={`#${champ}`}
                  onClick={(e) => {
                    e.preventDefault();
                    document.getElementById(champ)?.focus();
                  }}
                >
                  {erreurs[champ]}
                </a>
              </li>
            ))}
          </ul>
        </div>
      )}

      {echec && <p role="alert" className="alerte">{echec}</p>}

      <form noValidate onSubmit={soumettre}>
        <fieldset>
          <legend>Période du prêt</legend>
          <Champ
            id="debut"
            type="date"
            libelle="Date de retrait"
            aide="Au stock, bâtiment B, de 8 h à 17 h."
            required
            min={aujourdhui}
            value={saisie.debut}
            erreur={erreurs.debut}
            onChange={(e) => modifier('debut', e.target.value)}
            onBlur={() => verifier('debut')}
          />
          <Champ
            id="fin"
            type="date"
            libelle="Date de retour"
            aide="15 jours au maximum, premier et dernier jour compris."
            required
            min={saisie.debut || aujourdhui}
            value={saisie.fin}
            erreur={erreurs.fin}
            onChange={(e) => modifier('fin', e.target.value)}
            onBlur={() => verifier('fin')}
          />
        </fieldset>

        <Champ
          id="motif"
          libelle="Motif (facultatif)"
          aide="Par exemple : présentation chez un client. 100 caractères au maximum."
          maxLength={100}
          value={saisie.motif}
          onChange={(e) => modifier('motif', e.target.value)}
        />

        <button type="submit" aria-disabled={envoiEnCours}>
          {envoiEnCours ? 'Envoi en cours…' : 'Confirmer la réservation'}
        </button>
      </form>

      {/* Présente dès le départ, vide : le lecteur d'écran annonce ce qui y apparaît. */}
      <p role="status" className="statut">
        {envoiEnCours ? 'Envoi de la réservation…' : ''}
      </p>
    </main>
  );
}