SnippetJavaScript

Toast

Lightweight toast/notification queue with auto-dismiss and aria-live.

Explanation

Toasts should use an aria-live region so screen readers announce them. Queue multiple messages; allow manual dismiss.

javascript

export function createToaster(host, { duration = 4000 } = {}) {
  host.setAttribute('aria-live', 'polite');
  host.setAttribute('aria-relevant', 'additions');

  function show(message, { variant = 'info' } = {}) {
    const el = document.createElement('div');
    el.className = `toast toast--${variant}`;
    el.setAttribute('role', 'status');
    el.textContent = message;

    const close = document.createElement('button');
    close.type = 'button';
    close.setAttribute('aria-label', 'Dismiss');
    close.textContent = '×';
    close.addEventListener('click', () => el.remove());
    el.append(close);
    host.append(el);

    const t = setTimeout(() => el.remove(), duration);
    el.addEventListener('mouseenter', () => clearTimeout(t), { once: true });
    return el;
  }

  return { show };
}

typescript

type ToastOptions = { variant?: 'info' | 'success' | 'error'; duration?: number };

export function createToaster(host: HTMLElement, defaults: { duration?: number } = {}) {
  const duration = defaults.duration ?? 4000;
  host.setAttribute('aria-live', 'polite');
  host.setAttribute('aria-relevant', 'additions');

  function show(message: string, opts: ToastOptions = {}) {
    const el = document.createElement('div');
    el.className = `toast toast--${opts.variant ?? 'info'}`;
    el.setAttribute('role', 'status');
    el.textContent = message;

    const close = document.createElement('button');
    close.type = 'button';
    close.setAttribute('aria-label', 'Dismiss');
    close.textContent = '×';
    close.addEventListener('click', () => el.remove());
    el.append(close);
    host.append(el);

    const t = setTimeout(() => el.remove(), opts.duration ?? duration);
    el.addEventListener('mouseenter', () => clearTimeout(t), { once: true });
    return el;
  }

  return { show };
}

Usage example

javascript

const toaster = createToaster(document.getElementById('toasts'));
toaster.show('Saved', { variant: 'success' });
toaster.show('Something failed', { variant: 'error', duration: 6000 });

Accessibility talking points

← All snippets

Explanation

Usage example

Related