منذ التحديث الأخير إلى 2.8.0.beta2، أصبح زر قائمة المسؤول مضاءً باللون الأصفر.
ظننت أن Discourse يحاول إخباري بشيء، ولكن حتى بعد البحث على الويب وفي هذا المنتدى، لا أملك أدنى فكرة عما يمكن أن يكون.
هل يمكن لأحد أن يوضح لي؟
أعتقد أنه يخبرك بأن تركيز لوحة المفاتيح موجود على هذا العنصر. كان هذا تغييرًا حديثًا متعلقًا بـ #إمكانية_الوصول:
بعد عرض القائمة، جرب الضغط على Tab للتنقل بين عناصر القائمة.
4 إعجابات
نعم، صحيح، كما أشار @simonk، إحدى الطرق التي كنا نخطئ فيها هي عدم نقل التركيز إلى الطبقات المنبثقة. يجب أن يكون التركيز في مكان مناسب أثناء التنقل في التطبيق.
4 إعجابات
هـمّ، لست متأكّدًا؛ هل نحتاج إلى حالة تحويم هناك @awesomerobot؟
إعجاب واحد (1)
أعتقد أننا قد نرغب في التبديل من :focus إلى :focus-visible في ملفات CSS الخاصة بنا. لا يتم دعمه في Safari بعد، لكن من السهل العودة إلى :focus في هذه الحالة.
إذا تطابق العنصر النشط مع :focus-visible، وتسبب سكريبت في نقل التركيز إلى عنصر آخر، يجب أن يتطابق العنصر الذي تم التركيز عليه حديثًا مع :focus-visible.
هذا يعني أنه إذا فتحت قائمة الهامبرغر عن طريق التنقل عبر لوحة المفاتيح (مما يُفعّل نمط :focus-visible)، عند فتح القائمة، سيظهر نمط :focus-visible. أما إذا فتحت القائمة باستخدام مؤشر الفأرة، فلن يظهر نمط :focus-visible:
هناك عيب واحد: في سيناريو إدخال مختلط حيث تفتح قائمة الهامبرغر باستخدام مؤشر الفأرة ثم تحاول التنقل عبر لوحة المفاتيح… لن يكون نمط :focus-visible مرئيًا على الرابط الأول (على الرغم من أنه مُركّز تقنيًا)، مما يجعله يبدو وكأنه تم تخطيه. لا أعرف ما إذا كان هناك حل بديل لهذه المشكلة…
5 إعجابات
بما أنني (في الغالب) مستخدم للماوس، فهذا هو بالضبط ما أتوقع أن يتصرف به النظام.
من ناحية أخرى، في بعض الأحيان أستخدم هاتفي الذكي بشاشة تعمل باللمس: توجد نفس المشكلة هناك، حيث يتم تمييز “الإدارة”، مما يشير إلى أن هناك شيئًا مهمًا في قسم الإدارة يحتاج إلى انتباه.
من موضوع قارئ الشاشة ذي الصلة، أرى أن هناك حاجة إلى تعيين التركيز بطريقة ما.
سأكون سعيدًا بالفعل بالسلوك المذكور أعلاه للمؤشرات.
إعجاب واحد (1)
أواجه نفس المشكلة.
لا أعتقد أن هذا العنصر يحقق حاليًا قيمة تجربة المستخدم (UX) التي كانت تنويها فريقكم — فقد تلقينا فورًا تقارير عن أخطاء من منتدانا بخصوص هذا الأمر. يختفي التركيز عند النقر بزر الماوس الأيمن في أي مكان داخل النافذة، ويظهر تركيز مزدوج عند تمرير المؤشر فوق الأزرار. بشكل عام، يبدو الأمر معيبًا للمستخدمين، خاصةً لأن Discourse لا يفرض هذا التحديد في أي منطقات عرض أخرى.
سيكون من الأفضل إظهار تركيز لوحة المفاتيح فقط عندما يضغط المستخدم أول مرة على Tab، أو فقط عندما ينتقل المستخدم باستخدام لوحة المفاتيح لفتح قائمة الهامبرغر.
إعجابَين (2)
هل يمكنك نشر لقطة شاشة لهذا؟ لستُ على علم بهذه المشكلة
إعجاب واحد (1)
أرى نفس المشكلة في Safari و Firefox (على نظام macOS)، وقد تم الإشارة إليها أيضًا في المنشور أعلاه:
إذا كنت أفهم هذه الميزة بشكل صحيح، فيجب أن أتمكن من فتح القائمة بالنقر أو الضغط على =، ثم التنقل باستخدام شيء ما (مثل مفاتيح الأسهم؟) والضغط على شيء آخر (مثل Enter؟) للانتقال إلى العنصر المميز.
في Safari و Firefox على نظام macOS، سواء فتحت القائمة بالنقر أو بـ =، لا أستطيع التنقل داخل تلك القائمة. مفاتيح الأسهم للأعلى/للأسفل تحرك الصفحة للأعلى وللأسفل، بينما مفاتيح الأسهم لليسار/لليمين لا تبدو وكأنها تفعل أي شيء.
مفتاح Tab ينقل التركيز إلى شيء آخر، مثل زر الإعجاب في منشور ما، ويزيل التمييز الأصفر من القائمة. في Firefox، كان الضغط المتكرر على Tab يمر عبر عناصر القائمة قبل أن أبدأ في كتابة هذه الرد، لكنه الآن لا يفعل ذلك؛ فقد تم إغلاق نافذة خاصة بين تلك المحاولات.
ألاحظ هذه السلوكيات هنا على موقع Meta وعلى نسختي الخاصة المحدثة إلى efbc2481d8 (باستثناء أن الضغط المتكرر على Tab في Firefox يعمل بنجاح، وهو ما رأيته فقط هنا).
إعجاب واحد (1)
لا ينبغي أن تفعل مفاتيح الأسهم أي شيء، لكن يجب أن يعمل tab وenter!
إذن عندما تفتح القائمة باستخدام = وتضغط على tab، هل لا تقوم بالتبديل بين عناصر القائمة؟ أنا على نظام macOS ويعمل كما هو متوقع في Safari وFirefox وChrome، لذا فإن هذا محير بعض الشيء!
لقد نظرت عن كثب في ما يحدث هنا بشكل عام، ولن تعمل فكرة استخدام focus-visible التي ذكرتها أعلاه.
المشكلة هي أن قائمة الهامبرغر تظهر في HTML خارج حاوية زر القائمة (الحاوية التي تحتوي على أزرار البحث والهامبرغر والمستخدم). وهذا يعني أن القائمة ليست التالية في ترتيب التبويب الطبيعي. للتعويض عن ذلك، نقوم بتعيين focus على العنصر الأول في القائمة باستخدام JavaScript. وهذا له أثر جانبي يتمثل في تمييز العنصر (لأننا نحتاج أيضًا إلى تنسيقات :focus).
لا أعتقد أننا نستطيع بالضرورة الاعتماد على اكتشاف ضغط tab لأنه ليس المفتاح الوحيد الذي تستخدمه قارئات الشاشة للتنقل، وكنا سنتداخل مع الاختصارات الأخرى إذا قمنا بالتقاط جميع ضغطات المفاتيح…
يمكنني التفكير في حلين محتملين:
-
نقل القائمة في HTML لتظهر مباشرة بعد الزر الذي يُفعّلها. قد يكون لهذا بعض الآثار الجانبية على التخطيط.
-
حبس التركيز داخل القائمة عندما تكون مفتوحة، لكن لا تعيين التركيز على أي عنصر معين. هذا يعني أنه عندما تكون القائمة مفتوحة، يمكنك فقط التنقل بين محتوياتها ولا شيء آخر في الصفحة. أعتقد أن هذا هو الحل المفضل على الأرجح…
إعجابَين (2)
صحيح. ولأجل المزيد من الدقة، هذا هو macOS 11.4 وSafari 14.1.1. أنا أصفح موقع meta في نافذة خاصة، وأمثالي الخاص في نافذة غير خاصة.
لابد أنني أخطأت في اختباري الأولي لـ Firefox، حيث يعمل بالطريقة التي وصفتها إذا تم تمكين تفضيل النظام لـ استخدام التنقل بلوحة المفاتيح لنقل التركيز بين العناصر، بينما ينتقل إلى زر الإعجاب بالطريقة التي وصفتها سابقًا إذا كان معطلاً.
يمكنني التبديل بشكل موثوق بين السلوكين عن طريق تبديل تفضيل النظام هذا دون الحاجة إلى إعادة تحميل الصفحة في Firefox.
أما في Safari، فأرى أنه ينتقل إلى زر الإعجاب بغض النظر عن تفضيل النظام هذا، حتى بعد إعادة تحميل الصفحة. لم أختبر بعد إعادة تشغيل Safari بعد تمكينه.
لقد قمت الآن بفحص Chrome أيضًا، ويعمل بالطريقة التي وصفتها بغض النظر عن تفضيل النظام.
إعجاب واحد (1)
لقد عثرت على سبب مشكلتي في Safari. لاحظت أنه على عكس Chrome وFirefox، إذا نقرت في أي مكان في شريط الرأس ثم ضغطت على Tab، فلن يتم تحديد أي من العناصر في الشريط.
أدى ذلك إلى اكتشاف هذا التفضيل في Safari ضمن قسم “متقدم”:
أنا متأكد بنسبة 99% أن هذا هو الإعداد الافتراضي بعد تثبيت Big Sur حديثًا، ولا أعتقد أنني قمت بتغيير ذلك. عند تفعيل هذا التفضيل، يبدأ العمل بالطريقة التي وصفتها. كما يشير النص أعلاه، يعمل أيضًا بهذه الطريقة عند استخدام Option-Tab مع إيقاف التفضيل.
إعجابَين (2)