تسمح show بالتفاعل خارج الحوار؛ أما showModal فتمنعه في الوثيقة الحاوية، عدا الحوار وذريته. قسنا الفرق بزرين، ثم اختبرنا تغيير النمط. [1] [2]
الخلاصة السريعة
- في A وصل التركيز البرمجي إلى الزر الخارجي.
- في B بقي التركيز داخل الحوار بعد المحاولة نفسها.
- سجلنا خطأين عند تبديل نمط حوار مفتوح.
- بعد الإغلاق نجح فتح النمط الآخر في تجربتنا.
زرّان وسجل صغير
أنشأنا صفحة اختبار فارغة فيها زر اسمه outside وحوار يحتوي زرًا اسمه inside. لم نضف تنسيقًا أو مكتبة واجهات. نفذنا التجربة في Edge 155.0.4283.45، وسجلنا ثلاثة أشياء: هل الحوار مفتوح، وأي زر يحتفظ بالتركيز، واسم الاستثناء إن ظهر.
في سجلنا تعني A الفتح الأول غير المشروط، وتعني B الفتح المشروط بعد الإغلاق. واستخدمنا C لمرحلة الإغلاق الأخيرة. الحروف أسماء للحالات المحلية فقط؛ ليست أوضاعًا جديدة في الواجهة البرمجية. تعمدنا تثبيت الزرين كي لا ننسب الفرق إلى اختلاف المحتوى.
نفذ حالة A كاملة
نفذ الشيفرة في صفحة فارغة. بعدها أغلق الحوار بـdialog.close()، وافتحه بـdialog.showModal()، ثم نفذ inside.focus() وoutside.focus() بالتتابع. [1] [2]
طبع التشغيل الأول قيمتين صحيحتين. في هذه اللحظة كان الحوار مفتوحًا، ومع ذلك كان العنصر النشط هو outside. لذلك لم نستخدم ظهور الصندوق وحده وصفًا كافيًا لما حدث؛ وضعنا قراءة التركيز بجواره في السجل.
const outside = document.createElement("button");
const dialog = document.createElement("dialog");
const inside = document.createElement("button");
outside.textContent = "outside";
inside.textContent = "inside";
dialog.append(inside);
document.body.append(outside, dialog);
dialog.show();
outside.focus();
console.log(dialog.open,
document.activeElement === outside);الحالة المفتوحة وحدها لم تكف
بعد إنهاء A أغلقنا الحوار. بدأنا B بالفتح المشروط، ووجهنا التركيز إلى inside صراحة، ثم حاولنا نقله إلى outside. بقيت مقارنة الزر الخارجي خاطئة، وظلت مقارنة الزر الداخلي صحيحة. لم نكتف بقراءة خاطئة واحدة؛ فحصنا أيضًا أين بقي التركيز بالفعل.
كانت خانة dialog.open صحيحة في A وB معًا. إذن هذه القراءة المتساوية لم تميز بين نتيجتي الزر الخارجي في اختبارنا. أما C فجاءت بعد الإغلاق الأخير: صارت خانة الفتح خاطئة، ونجحت محاولة التركيز الخارجي التي نفذناها بعدها.
الجدول التالي سجل للحظات القياس، وليس ترتيبًا لحركة المؤشر. كتبنا «نعم» حين صدقت المقارنة التي نفذناها بعد استدعاء التركيز؛ ولم نسجل عدد ضغطات مفاتيح أو نقرات. في A قسنا الخارج فقط، لذلك تركنا خانة الداخل غير مقاسة.
| الحالة | الحوار مفتوح؟ | الخارج نشط؟ | الداخل نشط؟ |
|---|---|---|---|
| A | نعم | نعم | غير مقاس |
| B | نعم | لا | نعم |
| C | لا | نعم | لا |
محاولتا تبديل النمط
نفذنا اختبارين إضافيين على الزرين نفسيهما. أثناء A استدعينا showModal() قبل الإغلاق؛ وأثناء B استدعينا show() قبل الإغلاق. التقطنا في كل مرة اسم الاستثناء داخل try/catch، فظهر InvalidStateError مرتين. بقي الحوار مفتوحًا في النمط الذي بدأنا به بعد كل محاولة.
يوثق المرجعان هذين الاستثناءين عند طلب النمط المقابل لحوار مفتوح. [1] [2]
بعد الخطأ الأول استدعينا dialog.close()، ثم نجح الفتح المشروط. وبعد الخطأ الثاني أغلقنا الحوار وكررنا الفتح غير المشروط، فنجح أيضًا. أبقينا الخطأين في سجل مستقل، حتى لا تبدو عملية الإغلاق وكأنها حدثت تلقائيًا بسبب الاستثناء.
ما الذي أثبتته هذه الصفحة؟
نجحت المقارنة لأننا أعدنا استخدام العنصرين، وميزنا محاولة التركيز عن نتيجتها. لو اكتفينا بكتابة «نفذنا outside.focus()» لفقدنا أهم معلومة في B: الأمر نُفذ، لكن الزر لم يصبح العنصر النشط. لهذا احتفظنا بالقيم المنطقية الفعلية بجوار أسماء الحالات.
هذه تجربة تركيز برمجي فقط. لم نختبر التنقل بزر Tab أو النقر أو قارئ شاشة أو حوارًا داخل إطار؛ ولا نقدم شهادة إتاحة للصفحة. ولإعادة المقارنة المحلية، احتفظ بأسماء المراحل وبالنتائج بعد كل محاولة، ثم افصل سجل الاستثناءات عن سجل الإغلاق.
المراجع
أُعدّ هذا المقال بمساعدة الذكاء الاصطناعي وراجعته أدوات ذكاء اصطناعي. لا يُنسب إلى مراجع بشري أو خبير مستقل. منهجية المحتوى.