Annoncer les mises à jour utiles

Après l’envoi du formulaire, une personne qui utilise un lecteur d’écran doit savoir si sa dépense a bien été ajoutée. Pourtant, déplacer automatiquement le focus vers un message de confirmation interrompt sa navigation et peut la désorienter. Vous allez annoncer le résultat au bon endroit, tout en laissant le focus sur le bouton d’envoi ou sur le contrôle que la personne a choisi.

La page comporte déjà, dans la section des dépenses, un paragraphe prévu pour annoncer les changements. Comme indiqué dans la leçon sur les régions de page, conservez la structure native de la page et la hiérarchie de ses titres ; ici, le point important est de mettre à jour ce paragraphe après une action réussie.

Annoncer sans interrompre

Une région `aria-live="polite"` signale aux technologies d’assistance qu’un contenu a changé et qu’il peut être annoncé à un moment approprié. La valeur `polite` évite de couper une annonce en cours pour une confirmation ordinaire. L’attribut `role="status"` donne aussi au paragraphe une fonction de statut, adaptée à un résultat bref qui ne nécessite pas de réponse immédiate.

Le message doit être placé dans le rendu avant que l’action se produise : les lecteurs d’écran peuvent ainsi détecter sa mise à jour. N’ajoutez pas le message uniquement après avoir déplacé le focus, et ne rendez pas la région visible ou invisible en fonction de l’envoi. Gardez-la présente et modifiez seulement son texte lorsque l’ajout a effectivement abouti.

Mettre à jour le statut après l’ajout

Voici une version complète et autonome du point d’intégration dans `ListeDepenses.tsx`. Elle reçoit les dépenses et une fonction d’ajout par propriétés ; dans le tableau de bord, la fonction fournie par le parent peut transmettre la nouvelle dépense au contexte, conformément à la répartition déjà établie. L’exemple représente volontairement l’ajout par un bouton afin de rendre visible le comportement du statut sans redéfinir le formulaire accessible de la leçon précédente.

import { useState } from "react";

type Depense = {
  id: string;
  description: string;
};

type ListeDepensesProps = {
  depenses: Depense[];
  onAjouter: (depense: Depense) => void;
};

export default function ListeDepenses({
  depenses,
  onAjouter,
}: ListeDepensesProps) {
  const [messageAccessibilite, setMessageAccessibilite] = useState("");

  function ajouterDepense() {
    const nouvelleDepense: Depense = {
      id: crypto.randomUUID(),
      description: "Déjeuner",
    };

    onAjouter(nouvelleDepense);
    setMessageAccessibilite(
      `Dépense « ${nouvelleDepense.description} » ajoutée.`,
    );
  }

  return (
    <section id="depenses" className="atelier-liste" aria-labelledby="titre-depenses">
      <h2 id="titre-depenses">Dépenses</h2>
      <button type="button" onClick={ajouterDepense}>
        Ajouter une dépense d’exemple
      </button>
      <ul>
        {depenses.map((depense) => (
          <li key={depense.id}>{depense.description}</li>
        ))}
      </ul>
      <p className="atelier-annonce" role="status" aria-live="polite">
        {messageAccessibilite}
      </p>
    </section>
  );
}

Dans votre formulaire réel, appelez la mise à jour du message seulement après que le parent a accepté l’ajout. Le texte peut préciser la description, ou rester générique si cette information n’est pas utile. Ne faites pas dépendre l’annonce de la liste filtrée : l’ajout peut réussir même si les filtres courants masquent ensuite la dépense.

Vérifier le comportement

Effectuez un ajout au clavier, puis vérifiez que le curseur reste sur le bouton d’envoi et qu’aucun autre contrôle ne reçoit le focus sans action de votre part. Avec un lecteur d’écran, contrôlez que la confirmation est annoncée une fois et qu’elle ne répète pas à chaque rendu du composant. Si l’ajout échoue, ne présentez pas une confirmation de succès : le message doit décrire le résultat réel de l’action.

À retenir

• Gardez une région `role="status"` et `aria-live="polite"` présente dans le rendu.
• Mettez son texte à jour après une confirmation réelle de l’ajout.
• Annoncez un message bref et utile, sans faire dépendre son succès des filtres affichés.
• Ne déplacez pas le focus et ne rendez pas le message tabulable.

La prochaine étape consiste à assembler les couches du tableau de bord en reliant les composants, les hooks et le contexte.