הודעות צצות

הודעת הצלחה יושבת ב-polite והודעת שגיאה ב-assertive. זה לא הבדל קוסמטי: polite ממתין לסוף המשפט שקורא המסך באמצע, ולכן שגיאה שמסומנת polite מגיעה אחרי שהמשתמש כבר המשיך הלאה. הודעות צצות הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · טפסים · נגישות · בלי ספריות

<!-- הודעות צצות — קראו ל-klixToast('הטופס נשלח') אחרי שליחה -->
<style>
  .klix-toasts { position: fixed; bottom: 1.25rem; inset-inline-end: 1.25rem; z-index: 50;
    display: grid; gap: .5rem }
  .klix-toast { padding: .75rem 1rem; border-radius: .8rem; color: #fff; font-weight: 700;
    background: #059669; box-shadow: 0 12px 28px -14px rgba(0,0,0,.9);
    animation: klix-toast-in .25s ease both }
  .klix-toast[data-kind="error"] { background: #e11d48 }
  @keyframes klix-toast-in { from { opacity: 0; transform: translateY(10px) } }
  html[data-motion="off"] .klix-toast { animation: none }
</style>

<div class="klix-toasts" id="klix-toasts"></div>

<script>
(function () {
  var MS = 4000;   // כמה זמן ההודעה נשארת

  var box = document.getElementById('klix-toasts');
  if (!box) return;

  window.klixToast = function (text, kind) {
    var el = document.createElement('div');
    el.className = 'klix-toast';
    el.setAttribute('data-kind', kind === 'error' ? 'error' : 'ok');
    // שגיאה קוטעת את קורא המסך, הצלחה ממתינה לסוף המשפט הנוכחי
    el.setAttribute('role', kind === 'error' ? 'alert' : 'status');
    el.setAttribute('aria-live', kind === 'error' ? 'assertive' : 'polite');
    el.textContent = text;
    box.appendChild(el);
    setTimeout(function () { el.remove(); }, MS);
  };
})();
</script>