ఫోకస్ సమస్యలు మరియు మెరుగుదల మద్దతు

సులభంగా అందుబాటులో ఉండే (accessible) React కాంపోనెంట్లను నిర్మించడం అంటే కేవలం ARIA లేబుల్‌లను జోడించడం మాత్రమే కాదు. వినియోగదారులు కీబోర్డ్ ద్వారా మీ ఇంటర్‌ఫేస్‌లో ఎలా కదులుతారో కూడా మీరు జాగ్రత్త వహించాలి.

మొదటి నుండి పూర్తిగా సులభంగా అందుబాటులో ఉండే (fully accessible) నావిగేషన్ కాంపోనెంట్‌ను నిర్మించే నా ప్రయాణాన్ని నేను డాక్యుమెంట్ చేస్తున్నాను. ఈ అప్‌డేట్‌లో, నేను రెండు ప్రధాన అంశాలపై దృష్టి పెడుతున్నాను: కీబోర్డ్ ట్రాప్స్‌ను (keyboard traps) సరిచేయడం మరియు సులభమైన సబ్-లిస్ట్ మేనేజ్‌మెంట్ కోసం సిద్ధం కావడం.

కీబోర్డ్ ట్రాప్ పరిష్కారం

వినియోగదారు Shift+Tab ఉపయోగించి ఒక కాంపోనెంట్‌లోకి ప్రవేశించినప్పుడు ఒక సాధారణ సమస్య ఎదురవుతుంది. ఒకవేళ క్లోజ్ చేయబడిన సబ్-లిస్ట్‌లోని లింక్‌పై ఫోకస్ పడితే, ఫోకస్ అవుట్‌లైన్ (focus outline) కనిపించకుండా పోతుంది. కీబోర్డ్ వినియోగదారులకు ఇది ఒక పెద్ద లోపం.

దీనిని పరిష్కరించడానికి, నేను లాజిక్‌లో మార్పును అమలు చేశాను:

• ఒకవేళ ఫోకస్ క్లోజ్ చేయబడిన సబ్-లిస్ట్‌లోని చివరి ఎలిమెంట్‌పై పడితే, సిస్టమ్ ఫోకస్‌ను పైన ఉన్న రో (top row) లోని పేరెంట్ బటన్‌కు మారుస్తుంది. • ఈ నిర్దిష్ట కదలికను గుర్తించడానికి నేను onFocus ఈవెంట్ లిజనర్‌ను ఉపయోగిస్తాను. • ఫోకస్ చేయబడిన ఎలిమెంట్ కాంపోనెంట్‌లోని చివరి ఎలిమెంట్ అవునా కాదా అని ఈ లాజిక్ తనిఖీ చేస్తుంది. • ఒకవేళ అది చివరి ఎలిమెంట్ అయితే, కోడ్ పైన ఉన్న రో (top-row) లోని పూర్వీక ఎలిమెంట్‌ను (ancestor) గుర్తించి, ఫోకస్‌ను అక్కడికి మారుస్తుంది.

దీనివల్ల వినియోగదారు ఇంటర్‌ఫేస్‌లో తమ స్థానాన్ని ఎప్పుడూ కోల్పోరు.

సబ్-లిస్ట్ క్లోజింగ్ సెటప్

మీరు ఒక పేరెంట్ మెనూని క్లోజ్ చేసినప్పుడు, దాని లోపల ఉన్న అన్ని ఓపెన్ సబ్-మెనూలు కూడా క్లోజ్ కావాలి. ప్రామాణిక ఆపరేటింగ్ సిస్టమ్స్ కూడా ఇలాగే పనిచేస్తాయి.

పెర్ఫార్మెన్స్ సమస్యలు రాకుండా Reactలో దీనిని నిర్వహించడానికి, నేను స్టేట్ (state)లో ఫంక్షన్‌లను నిల్వ చేయడాన్ని నివారించాను. స్టేట్‌లో ఫంక్షన్‌లను నిల్వ చేయడం వల్ల అనవసరమైన రీ-రెండర్‌లు (re-renders) జరుగుతాయి.

దానికి బదులుగా, నేను ఒక భిన్నమైన విధానాన్ని ఉపయోగించాను:

• నేను useRef లోపల ఒక Mapను సృష్టించాను. • ఈ Map పేరెంట్ ఎలిమెంట్లకు సంబంధించిన క్లోజ్ ఫంక్షన్‌లను నిల్వ చేస్తుంది. • నావిగేషన్ అర్రే (navigation array) అభ్యర్థించబడినప్పుడు, సిస్టమ్ ఈ ఫంక్షన్‌లను ఆబ్జెక్ట్‌లలోకి ఇంజెక్ట్ చేస్తుంది. • Ref ఉపయోగించడం వల్ల రీ-రెండర్‌ను ట్రిగ్గర్ చేయకుండానే ఈ కనెక్షన్‌లను అప్‌డేట్ చేయడానికి నాకు వీలవుతుంది.

ఇది క్లీన్ మరియు ఊహించదగిన మెనూ ప్రవర్తనకు పునాది వేస్తుంది.

తదుపరి దశలో, ఆ సబ్-లిస్ట్‌లను క్లోజ్ చేయడానికి అవసరమైన అసలు లాజిక్‌ను నేను అమలు చేస్తాను.

మూలం: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l