الإشعار العابر
ترجمة لـالمواصفات بالإنجليزية. إن اختلفت الترجمة عن الأصل، فالإنجليزية هي المرجع.
يقول ما حدث للتو، باختصار ودون أن يعيق؛ ويعرض «تراجع» حين يمكن التراجع. الملف js/toast.js.
CSS: css/components/toast.css. الأصناف: .al-toast، .al-toast__action، .al-toaster.
البنية
import { toast } from "./js/toast.js";
toast("Process archived", { action: "Undo", onAction: () => restore(), dismissLabel: "Dismiss" });
يرسم .al-toaster (منطقة إعلان مهذّبة واحدة، تُنشأ فور تحميل الوحدة، فتُعلَن أول رسالة) وبداخلها .al-toast برسالة، ومع الإجراء، .al-toast__action وزر إغلاق (.al-toast__dismiss، يُسمّيه dismissLabel).
الأنواع والأحجام
دون إجراء، يبقى 4 ثوانٍ. ومع إجراء، لا حدّ زمنيًا له (WCAG 2.2.1): يبقى حتى يُستخدم، أو يُغلق، أو يحل محله الإشعار العابر التالي ذو الإجراء. والخيار timeout يضبط حدًا رغم ذلك.
الحالات
يدخل صاعدًا ومتلاشيًا إلى الظهور؛ ويخرج متلاشيًا. ويتوقف مؤقتًا ما دام المؤشر فوقه أو التركيز فيه.
لوحة المفاتيح
مفتاح F6 ينقل التركيز إلى الإجراء، من أي مكان في الصفحة. وبعد الإجراء أو الإغلاق، يعود التركيز إلى حيث كان حين ظهر الإشعار.
ARIA
role="status"، وaria-live="polite": يُقرأ حين يظهر، دون مقاطعة.
من اليمين إلى اليسار
في المنتصف أسفل الصفحة؛ والنص باتجاه الصفحة.
افعل ولا تفعل
- صيغة الماضي: «أُرشفت العملية».
- «تراجع» لكل ما يمكن التراجع عنه، بدل السؤال أولًا.
- وضع الأخطاء التي تحتاج إصلاحًا في إشعار عابر وحده؛ فمكانها بجانب الحقل أو في إشعار.
- إظهار إشعار عابر لشيء يرى الشخص أنه حدث.
الرموز
الرموز التي يستخدمها (16)
--al-border-focus، --al-color-inverse، --al-color-on-inverse، --al-duration-base، --al-ease-exit، --al-ease-standard، --al-radius-md، --al-radius-sm، --al-size-target-min، --al-space-2، --al-space-3، --al-space-4، --al-space-5، --al-text-base، --al-weight-semibold، --al-z-toast