ফোকাস সংক্রান্ত সমস্যা এবং রিফাইনমেন্ট সাপোর্ট
অ্যাক্সেসিবল React কম্পোনেন্ট তৈরি করতে শুধুমাত্র ARIA লেবেল যোগ করাই যথেষ্ট নয়। ব্যবহারকারীরা কীভাবে কিবোর্ড ব্যবহার করে আপনার ইন্টারফেসের মধ্য দিয়ে চলাচল করবেন, তা আপনাকে নিশ্চিত করতে হবে।
আমি শুরু থেকে একটি সম্পূর্ণ অ্যাক্সেসিবল নেভিগেশন কম্পোনেন্ট তৈরির যাত্রাটি নথিভুক্ত করছি। এই আপডেটে, আমি দুটি প্রধান বিষয়ের ওপর আলোকপাত করছি: কিবোর্ড ট্র্যাপ (keyboard traps) সমাধান করা এবং সাবলিস্ট ম্যানেজমেন্ট আরও সহজ করার প্রস্তুতি নেওয়া।
কিবোর্ড ট্র্যাপ সমাধান
একটি সাধারণ সমস্যা দেখা দেয় যখন একজন ব্যবহারকারী কোনো কম্পোনেন্টে প্রবেশ করতে Shift+Tab ব্যবহার করেন। যদি ফোকাস একটি বন্ধ সাবলিস্টের ভেতরের কোনো লিঙ্কে গিয়ে পড়ে, তবে ফোকাস আউটলাইনটি অদৃশ্য হয়ে যায়। কিবোর্ড ব্যবহারকারীদের জন্য এটি একটি বড় ত্রুটি।
এটি সমাধান করতে, আমি লজিক বা যুক্তিতে একটি পরিবর্তন এনেছি:
• যদি ফোকাস একটি বন্ধ সাবলিস্টের শেষ এলিমেন্টে পৌঁছায়, তবে সিস্টেমটি উপরের সারির প্যারেন্ট বাটনে ফোকাস সরিয়ে নেয়। • এই নির্দিষ্ট মুভমেন্টটি শনাক্ত করতে আমি একটি onFocus ইভেন্ট লিসেনার ব্যবহার করি। • লজিকটি পরীক্ষা করে দেখে যে ফোকাস করা এলিমেন্টটি কম্পোনেন্টের শেষ এলিমেন্ট কি না। • যদি তাই হয়, তবে কোডটি উপরের সারির অ্যাংসেস্টর (ancestor) শনাক্ত করে এবং সেখানে ফোকাস সরিয়ে নিয়ে যায়।
এটি নিশ্চিত করে যে ব্যবহারকারী ইন্টারফেসে তার অবস্থান কখনও হারাবেন না।
সাবলিস্ট ক্লোজিং সেটআপ করা
আপনি যখন একটি প্যারেন্ট মেনু বন্ধ করেন, তখন এর ভেতরে থাকা সমস্ত খোলা সাবমেনুও বন্ধ হয়ে যাওয়া উচিত। স্ট্যান্ডার্ড অপারেটিং সিস্টেমগুলো এভাবেই কাজ করে।
পারফরম্যান্সের সমস্যা ছাড়াই React-এ এটি হ্যান্ডেল করার জন্য, আমি স্টেট-এ (state) ফাংশন স্টোর করা এড়িয়ে চলেছি। স্টেট-এ ফাংশন স্টোর করলে অপ্রয়োজনীয় re-renders ঘটে।
পরিবর্তে, আমি একটি ভিন্ন পদ্ধতি ব্যবহার করেছি:
• আমি একটি useRef-এর ভেতরে একটি Map তৈরি করেছি। • এই Map-টি প্যারেন্ট এলিমেন্টগুলোর সাথে যুক্ত ক্লোজ ফাংশনগুলো সংরক্ষণ করে। • যখন নেভিগেশন অ্যারেটি রিকোয়েস্ট করা হয়, সিস্টেম এই ফাংশনগুলোকে অবজেক্টগুলোর মধ্যে ইনজেক্ট করে। • Ref ব্যবহার করার ফলে আমি কোনো re-render ট্রিগার না করেই এই কানেকশনগুলো আপডেট করতে পারি।
এটি একটি পরিচ্ছন্ন এবং অনুমানযোগ্য মেনু আচরণের ভিত্তি তৈরি করে।
এরপর, আমি সেই সাবলিস্টগুলো বন্ধ করার জন্য প্রকৃত লজিকটি ইমপ্লিমেন্ট করব।
উৎস: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l