التأكيد
ترجمة لـالمواصفات بالإنجليزية. إن اختلفت الترجمة عن الأصل، فالإنجليزية هي المرجع.
يقول إن شيئًا قد تم، ويعطي رقمًا مرجعيًا إن وُجد، ويقول ما سيحدث بعد ذلك. وبه ينتهي مسار العمل.
CSS: css/components/confirmation.css. الأصناف: .al-confirmation، .al-confirmation__body، .al-confirmation__title.
البنية
<div class="al-confirmation" tabindex="-1">
<h2 class="al-confirmation__title">Request sent</h2>
<p class="al-confirmation__body">Your reference <strong><bdi>…</bdi></strong></p>
</div>
<h2>What happens next</h2>
<p>…</p>
الأنواع والأحجام
نوع واحد: لوح ملوّن فيه العنوان، واختياريًا رقم مرجعي.
الحالات
ثابت. عند الوصول، ينتقل التركيز إلى اللوح (tabindex="-1") ويتغير عنوان الصفحة ليقول ما تم.
لوحة المفاتيح
لا يُوصل إليه بمفتاح Tab؛ بل يُنقل التركيز إليه مرة واحدة برمجيًا.
ARIA
العنوان يذكر النتيجة. والرقم المرجعي داخل <bdi> فيحتفظ بترتيبه في العربية.
من اليمين إلى اليسار
يُحاذى النص إلى البداية؛ والرقم المرجعي معزول.
افعل ولا تفعل
- قل ما حدث في العنوان، بصيغة الماضي.
- لا تَعِد إلا بخطوات تالية صحيحة للمنتج؛ وخذها من الخدمة لا من نظام التصميم.
- عطّل إجراء الإرسال بمجرد الضغط عليه، كي لا يُرسل الطلب مرتين.
- إظهار تأكيد قبل أن ينجح العمل فعلًا.
- إظهار رقم مرجعي مختلَق في بيئة الإنتاج.
الرموز
الرموز التي يستخدمها (10)
--al-color-accent، --al-color-on-accent، --al-leading-heading، --al-radius-sm، --al-space-2، --al-space-6، --al-space-8، --al-text-2xl، --al-text-lg، --al-weight-semibold