ફોકસની સમસ્યાઓ અને રિફાઇનમેન્ટ સપોર્ટ
એક્સેસિબલ React components બનાવવા માટે માત્ર ARIA લેબલ્સ ઉમેરવા કરતાં વધુની જરૂર હોય છે. વપરાશકર્તાઓ કીબોર્ડ દ્વારા તમારા ઇન્ટરફેસમાં કેવી રીતે આગળ વધે છે તેનું તમારે ધ્યાન રાખવું પડશે.
હું શૂન્યથી (from scratch) સંપૂર્ણ રીતે એક્સેસિબલ નેવિગેશન કમ્પોનન્ટ બનાવવાની મારી સફરને ડોક્યુમેન્ટ કરી રહ્યો છું. આ અપડેટમાં, હું બે મુખ્ય ક્ષેત્રો પર ધ્યાન કેન્દ્રિત કરું છું: કીબોર્ડ ટ્રેપ્સ (keyboard traps) સુધારવા અને વધુ સરળ સબલિસ્ટ મેનેજમેન્ટ માટે તૈયારી કરવી.
કીબોર્ડ ટ્રેપ ફિક્સ
એક સામાન્ય સમસ્યા ત્યારે થાય છે જ્યારે વપરાશકર્તા કમ્પોનન્ટમાં પ્રવેશવા માટે Shift+Tab નો ઉપયોગ કરે છે. જો ફોકસ બંધ સબલિસ્ટની અંદરના લિંક પર પહોંચે છે, તો ફોકસ આઉટલાઇન અદૃશ્ય થઈ જાય છે. કીબોર્ડ વપરાશકર્તાઓ માટે આ એક મોટી ભૂલ છે.
આને સુધારવા માટે, મેં લોજિકમાં ફેરફાર કર્યો છે:
• જો ફોકસ બંધ સબલિસ્ટના છેલ્લા એલિમેન્ટ પર પહોંચે છે, તો સિસ્ટમ ટોપ રો પરના પેરેન્ટ બટન પર ફોકસ શિફ્ટ કરે છે. • આ ચોક્કસ મૂવમેન્ટને ઓળખવા માટે હું onFocus ઇવેન્ટ લિસનરનો ઉપયોગ કરું છું. • લોજિક તપાસે છે કે ફોકસ થયેલ એલિમેન્ટ કમ્પોનન્ટમાં છેલ્લું છે કે નહીં. • જો તે છેલ્લું હોય, તો કોડ ટોપ-રો એન્સેસ્ટરને ઓળખે છે અને ત્યાં ફોકસ લઈ જાય છે.
આ સુનિશ્ચિત કરે છે કે વપરાશકર્તા ઇન્ટરફેસમાં પોતાનું સ્થાન ક્યારેય ગુમાવે નહીં.
સબલિસ્ટ ક્લોઝિંગ સેટઅપ
જ્યારે તમે પેરેન્ટ મેનૂ બંધ કરો છો, ત્યારે તેની અંદરના તમામ ખુલ્લા સબમેનૂ પણ બંધ થઈ જવા જોઈએ. સ્ટાન્ડર્ડ ઓપરેટિંગ સિસ્ટમ્સ આ રીતે જ કામ કરે છે.
React માં પર્ફોર્મન્સની સમસ્યાઓ ઊભી કર્યા વિના આને હેન્ડલ કરવા માટે, મેં સ્ટેટ (state) માં ફંક્શન્સ સ્ટોર કરવાનું ટાળ્યું છે. સ્ટેટમાં ફંક્શન્સ સ્ટોર કરવાથી બિનજરૂરી re-renders થાય છે.
તેના બદલે, મેં એક અલગ અભિગમ વાપર્યો છે:
• મેં useRef ની અંદર એક Map બનાવ્યું છે. • આ Map પેરેન્ટ એલિમેન્ટ્સ સાથે જોડાયેલા ક્લોઝ ફંક્શન્સને સ્ટોર કરે છે. • જ્યારે નેવિગેશન એરે (array) ની વિનંતી કરવામાં આવે છે, ત્યારે સિસ્ટમ આ ફંક્શન્સને ઓબ્જેક્ટ્સમાં ઇન્જેક્ટ કરે છે. • Ref નો ઉપયોગ કરવાથી હું re-render ટ્રિગર કર્યા વિના આ કનેક્શન અપડેટ કરી શકું છું.
આ સ્વચ્છ અને અનુમાનિત (predictable) મેનૂ બિહેવિયર માટે પાયો નાખે છે.
હવે પછી, હું તે સબલિસ્ટ્સને બંધ કરવા માટેનું વાસ્તવિક લોજિક અમલમાં મૂકીશ.
સ્ત્રોત: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l