Toast : Implémentation Robuste et Accessibilité

const CONTAINER_ID  = 'toast-container';
const MAX_TOASTS    = 3; // cap UX
let   hideTimerMap  = new WeakMap(); // un timer par toast

function getContainer(){
  return document.getElementById(CONTAINER_ID);
}

function getIcon(type){
  switch(type){
    case 'success': return '✅';
    case 'warn':    return '⚠️';
    case 'error':   return '⛔';
    default:        return 'ℹ️';
  }
}

/** Durée adaptative : base + par mot (bornée) */
function computeDuration(message, base=2200, perWord=180, min=2500, max=7000){
  const words = message.trim().split(/\s+/).filter(Boolean).length;
  return Math.max(min, Math.min(max, base + words*perWord));
}

/** Limite le nombre de toasts visibles (FIFO) */
function capToasts(container){
  while(container.childElementCount > MAX_TOASTS){
    container.firstElementChild?.remove();
  }
}

/** Arme le timer de disparition d’un toast */
function armHide(toast, delay){
  clearTimeout(hideTimerMap.get(toast));
  const t = setTimeout(() => hideToast(toast), delay);
  hideTimerMap.set(toast, t);
}

/** Lie les handlers A11y (pause au survol/focus) */
function bindA11yTimers(toast, delay){
  const pause = () => clearTimeout(hideTimerMap.get(toast));
  const resume= () => armHide(toast, delay);

  toast.addEventListener('mouseenter', pause);
  toast.addEventListener('focusin',   pause);
  toast.addEventListener('mouseleave',resume);
  toast.addEventListener('focusout',  resume);
}

/** Crée un toast DOM en évitant innerHTML (anti-XSS) */
function buildToast(message, type='info'){
  const toast = document.createElement('div');
  toast.className = `toast-message toast-${type}`;

  // Erreur "importante" ? rôle assertif optionnel
  if(type === 'error'){
    toast.setAttribute('role', 'alert');     // assertif
    toast.setAttribute('aria-atomic', 'true');
  }
  // sinon, l’annonce polite est assurée par
   le container role="status"

  // Icône
  const icon = document.createElement('span');
  icon.className = 'icon';
  icon.setAttribute('aria-hidden', 'true');
  icon.textContent = getIcon(type);

  // Texte (anti-XSS : textContent)
  const text = document.createElement('p');
  text.className = 'text';
  text.textContent = message;

  toast.append(icon, text);
  return toast;
}

/** Affiche un toast */
function showToast(message, { type='info', duration } = {}){
  const container = getContainer();
  if(!container) return;

  const toast = buildToast(message, type);
  container.appendChild(toast);

  // Forcer le démarrage de la transition proprement
  requestAnimationFrame(() => {
    toast.classList.add('show');
  });

  capToasts(container);

  const d = duration ?? computeDuration(message);
  bindA11yTimers(toast, d);
  armHide(toast, d);
}

/** Cache + nettoie un toast */
function hideToast(toast){
  toast.classList.remove('show');
  // Nettoyage après la transition CSS
  toast.addEventListener('transitionend', () => {
    toast.remove();
  }, { once:true });
}