בעיות פוקוס ותמיכה בשיפורים
בניית רכיבי React נגישים דורשת יותר מאשר רק הוספת תוויות ARIA. עליך לטפל באופן שבו משתמשים מנווטים בממשק שלך באמצעות מקלדת.
אני מתעד את המסע שלי בבניית רכיב ניווט נגיש לחלוטין מאפס. בעדכון זה, אני מתמקד בשני תחומים עיקריים: תיקון מלכודות מקלדת והכנה לניהול חלק יותר של תתי-רשימות.
תיקון מלכודת המקלדת
בעיה נפוצה מתרחשת כאשר משתמש משתמש ב-Shift+Tab כדי להיכנס לרכיב. אם הפוקוס נוחת על קישור בתוך תת-רשימה סגורה, מסגרת הפוקוס (focus outline) נעלמת. זוהי שגיאה משמעותית עבור משתמשי מקלדת.
כדי לתקן זאת, יישמתי שינוי לוגי:
• אם הפוקוס מגיע לאלמנט האחרון בתת-רשימה סגורה, המערכת מעבירה את הפוקוס לכפתור האב בשורה העליונה. • אני משתמש ב-onFocus event listener כדי לזהות את התנועה הספציפית הזו. • הלוגיקה בודקת אם האלמנט שבפוקוס הוא האחרון ברכיב. • אם כן, הקוד מזהה את אלמנט האב בשורה העליונה ומעביר את הפוקוס לשם.
זה מבטיח שהמשתמש