زر الإعجاب يفقد تسميته في بعض الظروف

مرحبًا للفريق!
هذه مجرد ملاحظة عابرة. لاحظت للتو في موضوع آخر أن زر الإعجاب يفتقر أحيانًا إلى تسمية إمكانية الوصول. لم أكتشف النمط بعد. لكن قد يكون ذلك مرتبطًا بما إذا كان المنشور قد تلقى إعجابًا واحدًا أو أكثر، أم لا يزال دون إعجابات، حيث يتم تقسيم عنصر التحكم لإظهار ذلك. عندئذٍ أرى زرين: أحدهما يحمل الرقم، والآخر غير مُسمّى.

ماركو

3 إعجابات

آه، أعتقد أن السبب هو أننا نقوم باختبار إضافة ردود Discourse هنا في Meta (Notice: testing Discourse Reactions here on meta for 1 week!). يجب علينا إصلاح ذلك! شكرًا لتقاريرك.

6 إعجابات

@Ahmed_Gagan للمعلومية، تأكد من إلقاء نظرة على هذا.

5 إعجابات

لقد جربتها واختبرتها مع العديد من الحالات المختلفة لكن لم أتمكن من إعادة إنتاج المشكلة. كانت التسمية تُعرض دائمًا، لكن في المرة الأولى تستغرق بعض التأخير، وهذا سلوك عام لخاصية العنوان.أفترض أن المشكلة تتعلق بفقاعة التلميح المقدمة لزر الإعجاب. هل نحن على نفس الصفحة هنا؟

إعجاب واحد (1)

أشير إلى ما يقوله قارئ الشاشة عند الضغط على زر الإعجاب بمنشور. أو ربما يمكنك إضافة تفاعلات أخرى، لكن قارئ الشاشتي لا يخبرني بذلك على الإطلاق. الشيء الوحيد الذي أحصل على تسمية عليه هو العنصر الذي يعرض عدد الإعجابات الحالية، إذا كان 1 أو أكثر. أما إذا كان العدد صفرًا، فإن هذا العنصر غير موجود. لكن الزر الذي يجب أن أضغطه لإضافة تفاعل “إعجاب” غير مسمى لقارئات الشاشات لدي على أنظمة Windows وMac وiOS.

أنا أعاني من العمى، لذا لا أستخدم الفأرة. وعمومًا، سمة title تشكل مشكلة في تفاعلات اللمس، إذ لا توجد عادةً طريقة سهلة لتحريك مؤشر الفأرة (hover).

أرجو أن يكون هذا مفيدًا…

وللتوضيح، أشير تحديدًا إلى الزر #discourse-reactions-actions-916340 > div > div.discourse-reactions-reaction-button.my-likes > button. هذا الزر لا يحتوي على سمة title ولا على aria-label، بل يحتوي فقط على صورة SVG مخفية عن قارئ الشاشة (aria-hidden). وحتى لو لم تكن مخفية، فإن هذه الصورة SVG وأطفالها لا يحتويان على أي معلومات يمكن لقارئ الشاشة استخدامها. لذا فإن الحل هنا هو:

  1. منح هذا الزر سمة aria-label، تحتوي على نص مثل “أعجب بهذا المنشور” أو “تفاعل بإعجاب” أو ما شابه. ونظرًا لأنه قد تُضاف تفاعلات أخرى لاحقًا، يجب أن تكون هذه الصياغة واضحة ومحددة لـ أي تفاعل يتم إضافته.
  2. العنصر الذي يحمل العداد، #discourse-reactions-counter-916340، يجب أن يحصل على معلومات أفضل حول من تفاعل فعليًا وبأي تفاعل. لا أعرف كيف يصل الأشخاص ذوو البصر إلى هذه المعلومات، سواء بالنقر على الرقم والحصول على نافذة منبثقة في مكان ما. لكن هذا أيضًا يجب أن يكون متاحًا لقارئات الشاشات ولمستخدمي لوحة المفاتيح.
  3. إذا أضيفت تفاعلات أخرى في المستقبل، فيجب أن تكون متاحة ليس فقط للفأرة، بل أيضًا لللمس ولوحة المفاتيح وقارئات الشاشات.

حاليًا، على الأقل بالنسبة لي، يبدو أن الأداة تسمح فقط بتفاعلات “الإعجاب”.

أعتذر عن تعدد الرسائل، لكن هذا يوضح مدى دقة البحث أحيانًا عن سبب مشكلة ما. سمة title في المنشورات التي ليست لي موجودة حاليًا في div الأب للزر الفعلي “الإعجاب”. لكن لكي يلتقطها قارئ الشاشة، يجب وضع السمة title على الزر نفسه. فقارئات الشاشات لا تلتقط العناوين من أي عنصر عشوائي. لقد تم إساءة استخدام هذه التعميمات كثيرًا خلال الـ 25 عامًا الماضية. لذا، إذا نقلت سمة title إلى عنصر <button> الفرعي، فستلتقطها قارئات الشاشات بشكل صحيح.

إعجاب واحد (1)

شكرًا لك، @MarcoZehe، على تحديد النقطة الدقيقة التي كنت تحتاج فيها إلى العنوان.
لقد أضفت طلب سحب (PR) هنا سيحل مشكلتك.

@MarcoZehe، تم دمج طلب السحب الآن، يمكنك سحب أحدث إضافة وتجربتها.

شكرًا لك! سأنتظر حتى يسحب هذا النموذج أحدث كود للإضافة. أنا لا أدير نموذج Discourse خاصًا بي، لذا لا يوجد مكان يمكنني من خلاله سحب الإضافة. شكرًا لك على الإصلاح السريع!

4 إعجابات

شكرًا جزيلاً لك يا ماركو.

لقد أعيد نشر ردود الفعل للتو هنا (يجب أن تكون نشطة خلال 15 دقيقة تقريبًا).

أخبرنا إذا بدت المشكلة محلولة.

3 إعجابات

مرحبًا @Sam، يبدو أن المشكلة قد حُلّت بالتأكيد. شكرًا لك!

4 إعجابات

شكرًا جزيلاً لك يا ماركو على الاختبار!

إعجابَين (2)