Toast / Status messages

function ToastPattern() {
  const [message, setMessage] = useState(null);
  const timeoutRef = useRef(null);

  function showToast() {
    setMessage("Changes saved successfully.");
    timeoutRef.current = setTimeout(() => setMessage(null), 4000);
  }

  return (
    <>
      <button onClick={showToast}>Show success toast</button>

      {/* This node exists BEFORE any message text does — many screen
         readers only announce live-region content if the region was
         already present in the tree when the content changes. */}
      <div role="status" aria-live="polite" className="sr-only">
        {message}
      </div>

      {message && (
        <div className="toast">
          <p>{message}</p>
          <button onClick={() => setMessage(null)}>Dismiss</button>
        </div>
      )}
    </>
  );
}