Уведомления и тосты: что, где и насколько громко сообщать

<!-- Тосты: читаются вежливо, не сдвигая фокус -->
<div class="toasts" role="status" aria-live="polite"></div>

<!-- Баннер — для проблемы на всю страницу -->
<div class="banner" role="alert" hidden>
  Нет сети. Изменения сохранятся, когда она вернётся.
</div>

<!-- Результат прямо рядом с действием -->
<button class="button" type="button" data-copy-link>Скопировать ссылку</button>
<span class="copy-result" role="status"></span>

const region = document.querySelector('.toasts');

function toast(text, { action, onAction, duration = 7000 } = {}) {
  const item = document.createElement('div');
  item.className = 'toast';
  item.textContent = text;

  if (action) {
    const button = document.createElement('button');
    button.type = 'button';
    button.textContent = action;
    button.addEventListener('click', () => {
      onAction?.();
      item.remove();
    });
    item.append(button);
  }

  // Время стоит, пока на сообщении курсор или фокус
  let timer;
  const start = () => { timer = setTimeout(() => item.remove(), duration); };
  const stop = () => clearTimeout(timer);
  item.addEventListener('mouseenter', stop);
  item.addEventListener('mouseleave', start);
  item.addEventListener('focusin', stop);
  item.addEventListener('focusout', start);

  region.replaceChildren(item);   // по одному: новое сообщение заменяет старое
  start();
}

toast('Фото удалено', { action: 'Вернуть', onAction: restorePhoto });

/* Если на странице есть липкая панель покупки, её высота поднимает тосты */
body:has(.buy-bar) { --bottom-bar: 4.5rem; }

.toasts {
  position: fixed;
  inset-inline: var(--space-4);
  bottom: calc(var(--space-4) + var(--bottom-bar, 0px) + env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 28rem;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  pointer-events: auto;
  animation: toast-in var(--duration-base) ease-out;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.5rem); }
}

/* Компьютер: слева внизу, подальше от главных кнопок */
@media (min-width: 48rem) {
  .toasts { justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}