البرامج التعليمية
إصلاح تركيز الحوارات في صفحات المنتجات مع Claude Opus 5.5
استخدم Claude Opus 5.5 لمراجعة حوار المنتج كسلسلة حالات للوحة المفاتيح: الفتح والتنقل والإغلاق والعودة.
استخدم Claude Opus 5.5 لمراجعة حوار المنتج كسلسلة حالات للوحة المفاتيح: الفتح والتنقل والإغلاق والعودة. قد يبدو الحوار مرتبًا، لكنه يترك التركيز خلف الغطاء أو يعيده إلى أعلى الصفحة. قدم المكون ومسار تركيز مسجلًا حتى يمكن اختبار الإصلاح المقترح.
حدد نتيجة كل إجراء
| الإجراء | النتيجة المتوقعة | الدليل المطلوب |
|---|---|---|
| فتح مواصفات المنتج | ينتقل التركيز إلى محتوى مفيد | العنصر النشط بعد الفتح |
| Tab وShift+Tab | يبقى التركيز داخل الحوار المشروط | أول وآخر عنصر قابل للوصول |
| Escape أو زر الإغلاق الظاهر | يغلق الحوار | الرؤية والعنصر النشط بعده |
| الإغلاق بعد اختفاء زر الفتح | يصل التركيز إلى هدف منطقي | الهدف البديل وسبب اختياره |
يصف نمط الحوار المشروط لدى W3C احتواء التنقل وإعادة التركيز، عادة إلى العنصر الذي فتح الحوار. إذا اختفى هذا العنصر، اختر وجهة منطقية في سير العمل. هذه متطلبات سلوكية، وليست مجرد إضافة `aria-modal` إلى غطاء غير مشروط.
مسار تركيز لورقة منتج
تخيل صفحة كوب تحتوي زر «المواصفات» وحوار مواصفات طويلًا وزر «إضافة إلى السلة» خارجه. عند الفتح قد يكون التركيز على عنوان ثابت يحمل `tabindex="-1"` أفضل من القفز إلى رابط بعيد. هذا العنوان هدف برمجي للتركيز، وليس محطة إضافية في ترتيب Tab العادي. أما التأكيد القصير فقد يناسبه عنصر تحكم متعلق بالإجراء.
اكتب المسار: المواصفات → عنوان الحوار → الإغلاق → رابط العناية → الإغلاق عند دوران Tab → المواصفات بعد Escape. يعتمد ترتيب العناصر الدقيق على المستند. إذا أزال تغيير المنتج زر الفتح، سجل بديلًا مثل عنوان المنتج الجديد أو عنصر التحكم التالي المناسب. لا تختر زرًا عشوائيًا فقط لتمرير التأكيد الآلي. هذا سيناريو افتراضي، وليس سجل تشغيل Opus.
احتفظ بزر إغلاق ظاهر. النقر على الخلفية لا يعوض الإغلاق الواضح والتنقل بلوحة المفاتيح. للتنفيذ الجديد، افحص عنصر dialog الأصلي و`showModal()`. وإذا استُخدمت مكتبة حوارات، حافظ على واجهات دورة حياتها وتركيزها قبل إضافة احتجاز تركيز مخصص قد يتعارض معها.
مطالبة إصلاح كاملة
راجع دورة لوحة المفاتيح لهذا الحوار الخاص بالمنتج. سأقدم المكون وإصدار مكتبة الحوار إن وجدت وكود زر الفتح وCSS المرتبط ومسار التركيز عند الفتح وTab للأمام وTab للخلف وEscape وزر الإغلاق الظاهر. صنف أدلة التشغيل المفقودة كمجهولة.
أنشئ جدول الإجراء والتركيز المتوقع والتركيز المرصود. افصل أخطاء التركيز الأولي والاحتواء والإغلاق وإعادة التركيز. اشرح ملاءمة الهدف الأولي لمحتوى ثابت طويل أو لحوار إجراء قصير. حافظ على الاسم المتاح وزر الإغلاق الظاهر وواجهة المكون. لا تفترض أن aria-modal وحدها تجعل الخلفية غير تفاعلية.
اقترح أصغر تعديل باستخدام المكتبة الحالية أو سلوك dialog الأصلي. عالج إزالة عنصر الفتح بهدف بديل منطقي ومحدد. أعد تصحيحًا وفحوص لوحة مفاتيح للإغلاق المعتاد ولحالة حذف عنصر الفتح. لا تدع اختبار تقنيات مساعدة بلا سجل حقيقي، ولا تستبدل الواجهة كاملة دون دليل ضرورة.يوفر دليل Opus الرسمي مرجعًا لتقديم السياق والمتطلبات الصريحة. هذا أسلوب مراجعة مقترح، وليس ادعاء بأن النموذج اجتاز هذه الفحوص.
اختبر العودة لا الفتح فقط
نفذ المسار بلوحة المفاتيح داخل التطبيق الفعلي. شمل الفتح والإغلاق المتكرر وTab العكسي وأطول محتوى وتحديث حالة يزيل زر الفتح. راقب ظهور التركيز في كل خطوة. وجود الحوار في DOM لا يثبت تعذر الوصول إلى الخلفية أو صحة عودة التركيز. سجل إصدارات المتصفح والتقنيات المساعدة لأي فحوص منفذة فعلًا.
أسئلة شائعة
**هل يجب التركيز دائمًا على أول زر؟** لا. قد يحتاج المحتوى الطويل المنظم نقطة بدء ثابتة، وقد يناسب التأكيد الحذفي اختيار الإجراء الأقل ضررًا.
**هل يكفي الإغلاق بالنقر على الخلفية؟** لا. احتفظ بزر واضح ومسار إغلاق بلوحة المفاتيح مناسب ومختبر.
**هل يشهد مسار تركيز آلي على الإتاحة كاملة؟** يكشف تراجعات محددة، لكنه لا يغني عن فحص الأسماء وترتيب القراءة وسلوك التقنيات المساعدة الحقيقي.
افصل قرار الحملة عن إصلاح التفاعل
بعد إصلاح الصفحة، استخدم الصورة والرسالة المعتمدتين لإنشاء تنويعات الحملة في Panelly Studio. ولمشكلات الإرسال بدل التنقل داخل الحوار، راجع استعادة أخطاء النماذج. Panelly هنا مساحة عمل إبداعية، وليس تكاملًا مزعومًا مع Opus.
