Générateur de Modale Accessible

<dialog id="modal" aria-labelledby="modal-title">
  <h2 id="modal-title">Confirmation</h2>
  <p>Voulez-vous vraiment effectuer cette action ?</p>
  <div class="modal-actions">
    <button type="button" onclick="document.getElementById('modal').close()">
      Annuler
    </button>
    <button type="button" onclick="confirm()">
      Confirmer
    </button>
  </div>
  <button 
    type="button" 
    class="modal-close" 
    aria-label="Fermer"
    onclick="document.getElementById('modal').close()"
  >
    ✕
  </button>
</dialog>

<!-- Bouton déclencheur -->
<button onclick="document.getElementById('modal').showModal()">
  Ouvrir la modale
</button>

// Le dialog HTML5 gère automatiquement :
// - Le piège de focus
// - La fermeture avec Échap
// - Le retour du focus au bouton déclencheur

const modal = document.getElementById('modal');

function confirm() {
  // Action de confirmation
  modal.close('confirm');
}

modal.addEventListener('close', () => {
  console.log('Modale fermée avec:', modal.returnValue);
});