فوکس کے مسائل اور ریفائنمنٹ سپورٹ
قابل رسائی React components بنانے کے لیے صرف ARIA labels کا اضافہ کرنا ہی کافی نہیں ہے۔ آپ کو اس بات کا خیال رکھنا ہوگا کہ صارفین کی بورڈ کے ذریعے آپ کے انٹرفیس میں کیسے حرکت کرتے ہیں۔
میں شروع سے ایک مکمل طور پر قابل رسائی نیویگیشن کمپوننٹ (navigation component) بنانے کے اپنے سفر کو دستاویزی شکل دے رہا ہوں۔ اس اپ ڈیٹ میں، میں دو اہم شعبوں پر توجہ مرکوز کر رہا ہوں: کی بورڈ ٹریپس (keyboard traps) کو ٹھیک کرنا اور ذیلی فہرستوں (sublists) کے بہتر انتظام کی تیاری کرنا۔
کی بورڈ ٹریپ کا حل
ایک عام مسئلہ تب پیش آتا ہے جب کوئی صارف کسی کمپوننٹ میں داخل ہونے کے لیے Shift+Tab کا استعمال کرتا ہے۔ اگر فوکس کسی بند شدہ ذیلی فہرست (sublist) کے اندر موجود لنک پر پڑ جائے، تو فوکس آؤٹ لائن غائب ہو جاتی ہے۔ کی بورڈ استعمال کرنے والوں کے لیے یہ ایک بڑا مسئلہ ہے۔
اسے ٹھیک کرنے کے لیے، میں نے لاجک میں تبدیلی کی ہے:
• اگر فوکس کسی بند شدہ ذیلی فہرست کے آخری عنصر پر پہنچتا ہے، تو سسٹم فوکس کو اوپر والی قطار کے پیرنٹ بٹن (parent button) پر منتقل کر دیتا ہے۔
• میں اس مخصوص حرکت کو محسوس کرنے کے لیے an onFocus event listener کا استعمال کرتا ہوں۔
• لاجک یہ چیک کرتی ہے کہ آیا فوکس شدہ عنصر کمپوننٹ کا آخری عنصر ہے۔
• اگر ایسا ہے، تو کوڈ اوپر والی قطار کے آباؤ (ancestor) کی شناخت کرتا ہے اور فوکس وہاں منتقل کر دیتا ہے۔
اس سے یہ یقینی بنتا ہے کہ صارف انٹرفیس میں اپنی جگہ کبھی نہ کھوئے۔
ذیلی فہرستوں کو بند کرنے کا سیٹ اپ
جب آپ کسی پیرنٹ مینو کو بند کرتے ہیں، تو اس کے اندر موجود تمام کھلے ہوئے ذیلی مینو (submenus) کو بھی بند ہو جانا چاہیے۔ اسٹینڈرڈ آپریٹنگ سسٹم اسی طرح کام کرتے ہیں۔
React میں کارکردگی کے مسائل پیدا کیے بغیر اسے سنبھالنے کے لیے، میں نے اسٹیٹ (state) میں فنکشنز کو اسٹور کرنے سے گریز کیا۔ اسٹیٹ میں فنکشنز کو اسٹور کرنے سے غیر ضروری ری-رینڈرز (re-renders) ہوتے ہیں۔
اس کے بجائے، میں نے ایک مختلف طریقہ اپنایا:
• میں نے useRef کے اندر ایک Map بنایا۔
• یہ Map پیرنٹ عناصر کے ساتھ منسلک کلوز فنکشنز (close functions) کو اسٹور کرتا ہے۔
• جب نیویگیشن ایرے (navigation array) کی درخواست کی جاتی ہے، تو سسٹم ان فنکشنز کو آبجیکٹس میں شامل کر دیتا ہے۔
• Ref کا استعمال مجھے ری-رینڈر (re-render) کیے بغیر ان کنکشنز کو اپ ڈیٹ کرنے کی اجازت دیتا ہے۔
یہ صاف ستھرے اور قابلِ پیش گوئی مینو کے طرزِ عمل کے لیے بنیاد فراہم کرتا ہے۔
اگلے مرحلے میں، میں ان ذیلی فہرستوں کو بند کرنے کے لیے اصل لاجک نافذ کروں گا۔
ماخذ: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l