Gérer le focus autour d’une fenêtre de dialogue

Quand vous ouvrez une fenêtre de newsletter au clavier, les personnes qui utilisent le clavier ou un lecteur d’écran doivent pouvoir commencer à interagir avec son contenu. Quand elles la ferment, elles doivent retrouver le bouton qui l’a ouverte, plutôt que de perdre leur position dans la page.

La leçon précédente a mis en place le dialogue natif et ses commandes d’ouverture et de fermeture. Vous allez compléter ce comportement en gérant explicitement le focus, sans changer le HTML de référence ni ajouter de fichier au projet.

Préparer les points de focus

Le dialogue contient déjà un champ courriel obligatoire, qui peut recevoir le focus et constitue un point d’entrée utile. Le bouton déclencheur est celui qui porte command="show-modal" commandfor="newsletter" : mémorisez-le avant l’ouverture pour pouvoir y revenir après la fermeture. Le script ci-dessous s’appuie sur ces éléments existants et ne requiert aucun attribut supplémentaire.

Ajouter le fichier JavaScript complet

Créez newsletter.js à la racine du projet. Le script écoute l’événement toggle du dialogue : lorsqu’il passe à l’état ouvert, le champ courriel reçoit le focus ; lorsqu’il passe à l’état fermé, le focus retourne au déclencheur mémorisé. Cette approche couvre aussi la fermeture par Échap et le bouton de fermeture natif.

const dialogue = document.querySelector("#newsletter");
const declencheur = document.querySelector('[command="show-modal"][commandfor="newsletter"]');
const champCourriel = document.querySelector("#courriel");

if (dialogue && declencheur && champCourriel) {
  dialogue.addEventListener("toggle", () => {
    if (dialogue.open) {
      champCourriel.focus();
    } else {
      declencheur.focus();
    }
  });
}

Charger le script dans la page

Dans index.html, ajoutez la ligne suivante juste avant la balise fermante </body>. Le script s’exécute après la création des éléments HTML qu’il recherche ; les commandes natives présentes dans le squelette restent inchangées.

<script src="newsletter.js"></script>

Testez les deux chemins avec le clavier : placez-vous sur « S’inscrire à la newsletter », activez le bouton et vérifiez que le champ courriel est focalisé. Fermez ensuite la fenêtre avec Échap, puis recommencez avec le bouton « Fermer » ; dans les deux cas, le focus doit revenir au bouton déclencheur.

À retenir

• Déplacez le focus vers un champ pertinent quand la fenêtre s’ouvre.
• Mémorisez le bouton qui a déclenché l’ouverture.
• À la fermeture, restituez le focus à ce bouton, y compris après Échap.
• Vérifiez le comportement au clavier avec chaque moyen de fermeture.

Vous pourrez ensuite utiliser details et summary pour présenter les informations pratiques de l’événement sans fabriquer un composant interactif.