الدرس 6 من 8
إشعارات عابرة
- 14 دقيقة
- 6 فحوص
- 3 تلميحات
- إلى المطلوب
هدف الدرس
تظهر وتُعلَن ثم تختفي
الشرح
الإشعار العابر رسالة قصيرة تؤكّد ما حدث، مثل «تم الحفظ»، ثم تختفي وحدها، ومن لا يرى الشاشة لن يعرف بها ما لم يُعلنها له قارئ الشاشة.
ويأتي الإعلان من منطقة حيّة (live region)، وهي حاوية عليها role="status"، فكل نصّ يُضاف داخلها يقرؤه قارئ الشاشة بهدوء بعد أن ينتهي ممّا يقرؤه. أما role="alert" فيقاطعه فورًا، لذلك اتركه للأخطاء.
والخطأ الشائع أن تنشئ المنطقة مع الرسالة نفسها، فقارئ الشاشة يراقب المناطق الموجودة من قبل، والمنطقة التي تُنشأ ونصّها فيها لا تُعلَن في الغالب، لذلك ضعها في الصفحة فارغة من البداية ثم أضف الرسائل داخلها.
المطلوب
اجعل #toasts منطقة role="status"، واكتب الدالة toast(message) لتضيف داخلها عنصرًا بالصنف toast فيه نصّ الرسالة، ثم تحذفه بعد 400 ميلي ثانية، وهي مهلة قصيرة اخترناها ليسهل التصحيح، أما في المواقع الحقيقية فاجعلها أربع ثوانٍ أو أكثر. ثم اربط #save بـ toast('تم الحفظ').
الفحوص
6 فحوص- المنطقة الحيّة موجودة في الصفحة من البداية
- الدالة toast تضيف رسالة بنصّها داخل المنطقة
- الرسالة تبقى وقتًا يكفي لقراءتها
- الرسالة تختفي وحدها بعد المهلة
- لكل رسالة مؤقّتها الخاص
- زرّ الحفظ يُظهر إشعار «تم الحفظ»