البرامج التعليمية
Claude Opus 5.5: إصلاح تنقل لوحة المفاتيح في معرض المنتج
قدّم إلى Claude Opus 5.5 بنية DOM وكود التفاعل وقواعد حالة واضحة للمعرض الدوّار.
نفّذ الفكرة باستخدام Panelly
حوّل الإلهام إلى إعلان لمنتجك
ابدأ بصورة منتج وفكرة. أنشئ إعلانًا بأربع لوحات أو مجموعة صور متناسقة أو فيديو باستخدام Panelly.
أنشئ باستخدام Panelly عدّل الطلب قبل بدء الإنشاء.
قدّم إلى Claude Opus 5.5 بنية DOM وكود التفاعل وقواعد حالة واضحة للمعرض الدوّار. اطلب إصلاح التركيز والتدوير معًا. إضافة مستمع مفاتيح للأسهم لا تصلح الروابط الخفية التي تتلقى التركيز، ولا توقف إعادة التشغيل بينما يقرأ المستخدم الشريحة.
لاحظ العطل قبل تعديل المكوّن
يصف سؤال مطور عام 2016 أسهمًا لا تعمل إلا بالفأرة. إنه عطل محدد بمكتبة قديمة وليس رقعة حديثة موصى بها. استند إلى نمط المعرض لدى W3C: تنقل Tab المعتاد، ضوابط أصلية متى أمكن، وزر التدوير قبل المحتوى المتحرك.
| العَرَض | نطاق الإصلاح | التحقق |
|---|---|---|
| Tab يصل لرابط شراء غير مرئي | إتاحة الشرائح غير النشطة | المحتوى النشط وحده ضمن تسلسل Tab الطبيعي |
| التالي ينقل التركيز داخل الشريحة | تفعيل الضابط | يبقى التركيز على التالي |
| التدوير يعود بعد خروج التركيز | حالة التشغيل الآلي | يلزم طلب صريح لإعادة التشغيل |
| التحويم يوقف لكن التركيز لا يوقف | تغطية أسباب الإيقاف | يتوقف في الحالتين |
لا تعترض كل مفاتيح الأسهم على مستوى الصفحة. للمعرض ذي السابق/التالي عقد مختلف عن منتقي الشرائح بعلامات تبويب. اختر النمط قبل طلب الرقعة.
اجعل الإيقاف مستمرًا
في مثال من أربع شرائح ورابطين لكل شريحة، قد يترك إزاحة ثلاث شرائح خارج الشاشة ستة روابط خفية ضمن Tab. هذا حساب لتخطيط افتراضي، لا تدقيق متجر حي. الإخفاء المرئي أو `aria-hidden` وحده لا يصلح التركيز بالكامل. استخدم استراتيجية عرض أو حالة غير نشطة تزيل ضوابط الشرائح المخفية من التنقل وتعرض الشريحة النشطة بشكل صحيح.
عرّف `activeIndex` وحالة التدوير. دخول التركيز يوقفه؛ التالي يغيّر الفهرس دون نقل التركيز. الخروج لا يعيد التشغيل. يمكن لطلب بدء صريح استئنافه وفق تصميم الضابط؛ ودخول التركيز لاحقًا من الخارج يوقفه مجددًا. عالج التحويم أيضًا. يختار هذا المثال تعطيل البدء الآلي عند تفضيل الحركة المخفّضة؛ هذا سلوك إضافي لا بديل عن ضوابط الإيقاف.
مطالبة مراجعة تنفيذ كاملة
راجع DOM وCSS ومعالجات حالة معرض المنتج. استخدم نمط السابق/التالي الأساسي، لا منتقي تبويبات إلا إذا تطلبه التصميم الحالي. حافظ على ترتيب الشرائح والروابط ومعرّفات المنتج والخيار المحدد.
احصر كل الضوابط القابلة للتركيز في الشرائح النشطة وغير النشطة. في المثال ذي 4 شرائح ورابطين لكل منها، حدّد الروابط الستة غير النشطة التي يجب ألا تبقى في Tab الطبيعي. لا تعتبر aria-hidden وحده إصلاحًا للوحة المفاتيح.
استخدم أزرارًا أصلية للسابق والتالي وبدء/إيقاف التدوير. أبقِ التركيز على الضابط المُفعّل. أوقف التدوير عند دخول التركيز والتحويم؛ لا تستأنفه عند خروج التركيز تلقائيًا، بل بطلب بدء صريح. عطّل التشغيل الآلي مبدئيًا لمفضلي الحركة المخفّضة في هذا التصميم.
أعد أصغر رقعة وجدول انتقالات واختبارات. اختبر Tab في الاتجاهين وEnter/Space على الأزرار والتالي المتكرر والالتفاف عند الطرفين والإيقاف بالتركيز وإعادة التشغيل الصريحة وحالة الحركة المخفّضة. افصل اختبار المتصفح المنفذ عن المقترح، ولا تدّعِ اعتماد إتاحة الموقع كله.هذه مهمة Opus افتراضية محددة وفق دليل المطالبات الرسمي. نموذج حالة محلي صغير يختبر الانتقالات المقترحة، لا يثبت عمل DOM أو قارئ الشاشة أو المؤقت الحقيقي.
اختبر المكوّن المسلّم
ابدأ خارج المعرض وتنقل بـTab في الاتجاهين. تحقق من وضوح التركيز وأسماء الأزرار، ثم فعّل التالي مرارًا وتأكد أن التركيز لا يختفي. أوقف على وصف طويل وانتظر أكثر من فترة التدوير المعتادة، ثم اختبر إعادة التشغيل الصريحة منفصلة. كرر مع الحركة المخفّضة وتخطيط الشاشة الصغيرة الحقيقي. سجّل المتصفح والتسلسل الملاحظ، لا مجرد لقطة سليمة ظاهريًا.
**هل تتطلب كل شريحة مفاتيح الأسهم؟** لا؛ اتبع النمط المختار، فالأزرار الأصلية لها تفعيلها المعتاد.
**هل يمكن إبقاء `tabindex=0` للروابط غير النشطة؟** لا إذا كانت خارج الشاشة وغير متاحة. طابق الإتاحة المرئية مع إتاحة لوحة المفاتيح.
جهّز صور الشرائح في Panelly Studio ثم اختبر المعرض الحقيقي منفصلًا. يعالج تباعد أهداف اللمس هندسة الأزرار، لا يثبت سلوك المفاتيح. لا نفترض دمج Opus في Panelly.
