ਫੋਕਸ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਅਤੇ ਸੁਧਾਰ ਸਹਾਇਤਾ
ਪਹੁੰਚਯੋਗ React components ਬਣਾਉਣ ਲਈ ਸਿਰਫ਼ ARIA labels ਜੋੜਨਾ ਹੀ ਕਾਫ਼ੀ ਨਹੀਂ ਹੈ। ਤੁਹਾਨੂੰ ਇਸ ਗੱਲ ਦਾ ਧਿਆਨ ਰੱਖਣਾ ਪਵੇਗਾ ਕਿ ਉਪਭੋਗਤਾ ਕੀਬੋਰਡ ਰਾਹੀਂ ਤੁਹਾਡੇ ਇੰਟਰਫੇਸ ਵਿੱਚ ਕਿਵੇਂ ਚਲਦੇ ਹਨ।
ਮੈਂ ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇੱਕ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪਹੁੰਚਯੋਗ (accessible) ਨੈਵੀਗੇਸ਼ਨ ਕੰਪੋਨੈਂਟ ਬਣਾਉਣ ਦੇ ਆਪਣੇ ਸਫ਼ਰ ਨੂੰ ਦਸਤਾਵੇਜ਼ੀ ਰੂਪ ਦੇ ਰਿਹਾ ਹਾਂ। ਇਸ ਅਪਡੇਟ ਵਿੱਚ, ਮੈਂ ਦੋ ਮੁੱਖ ਖੇਤਰਾਂ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰ ਰਿਹਾ ਹਾਂ: ਕੀਬੋਰਡ ਟ੍ਰੈਪਸ (keyboard traps) ਨੂੰ ਠੀਕ ਕਰਨਾ ਅਤੇ ਸਬਲਿਸਟ (sublist) ਪ੍ਰਬੰਧਨ ਨੂੰ ਵਧੇਰੇ ਸੁਚਾਰੂ ਬਣਾਉਣ ਦੀ ਤਿਆਰੀ ਕਰਨਾ।
ਕੀਬੋਰਡ ਟ੍ਰੈਪ ਦਾ ਹੱਲ
ਇੱਕ ਆਮ ਸਮੱਸਿਆ ਉਦੋਂ ਆਉਂਦੀ ਹੈ ਜਦੋਂ ਕੋਈ ਉਪਭੋਗਤਾ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਦਾਖਲ ਹੋਣ ਲਈ Shift+Tab ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਫੋਕਸ ਕਿਸੇ ਬੰਦ ਸਬਲਿਸਟ ਦੇ ਅੰਦਰ ਕਿਸੇ ਲਿੰਕ 'ਤੇ ਪੈਂਦਾ ਹੈ, ਤਾਂ ਫੋਕਸ ਆਊਟਲਾਈਨ ਗਾਇਬ ਹੋ ਜਾਂਦੀ ਹੈ। ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇਹ ਇੱਕ ਵੱਡੀ ਗਲਤੀ ਹੈ।
ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ, ਮੈਂ ਇੱਕ ਲੌਜਿਕ (logic) ਵਿੱਚ ਬਦਲਾਅ ਕੀਤਾ ਹੈ:
• ਜੇਕਰ ਫੋਕਸ ਕਿਸੇ ਬੰਦ ਸਬਲਿਸਟ ਦੇ ਆਖਰੀ ਐਲੀਮੈਂਟ 'ਤੇ ਪਹੁੰਚਦਾ ਹੈ, ਤਾਂ ਸਿਸਟਮ ਫੋਕਸ ਨੂੰ ਉੱਪਰਲੀ ਰੋਅ (top row) ਦੇ ਪੇਰੈਂਟ ਬਟਨ 'ਤੇ ਤਬਦੀਲ ਕਰ ਦਿੰਦਾ ਹੈ। • ਮੈਂ ਇਸ ਖਾਸ ਹਰਕਤ ਦਾ ਪਤਾ ਲਗਾਉਣ ਲਈ onFocus event listener ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹਾਂ। • ਲੌਜਿਕ ਇਹ ਜਾਂਚ ਕਰਦਾ ਹੈ ਕਿ ਕੀ ਫੋਕਸ ਕੀਤਾ ਗਿਆ ਐਲੀਮੈਂਟ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਆਖਰੀ ਹੈ। • ਜੇਕਰ ਅਜਿਹਾ ਹੈ, ਤਾਂ ਕੋਡ ਉੱਪਰਲੀ ਰੋਅ ਦੇ ਪੁਰਖੇ (ancestor) ਦੀ ਪਛਾਣ ਕਰਦਾ ਹੈ ਅਤੇ ਫੋਕਸ ਨੂੰ ਉੱਥੇ ਲੈ ਜਾਂਦਾ ਹੈ।
ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਵਿੱਚ ਆਪਣੀ ਜਗ੍ਹਾ ਕਦੇ ਨਾ ਗੁਆਵੇ।
ਸਬਲਿਸਟ ਬੰਦ ਕਰਨ ਦੀ ਸੈਟਿੰਗ
ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਪੇਰੈਂਟ ਮੀਨੂ ਨੂੰ ਬੰਦ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਸ ਦੇ ਅੰਦਰ ਸਾਰੇ ਖੁੱਲ੍ਹੇ ਸਬ-ਮੀਨੂ ਵੀ ਬੰਦ ਹੋ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ। ਸਟੈਂਡਰਡ ਓਪਰੇਟਿੰਗ ਸਿਸਟਮ ਇਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ।
React ਵਿੱਚ ਪਰਫਾਰਮੈਂਸ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਕੀਤੇ ਬਿਨਾਂ ਇਸ ਨੂੰ ਸੰਭਾਲਣ ਲਈ, ਮੈਂ state ਵਿੱਚ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਤੋਂ ਬਚਿਆ। state ਵਿੱਚ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਨਾਲ ਬੇਲੋੜੇ re-renders ਹੁੰਦੇ ਹਨ।
ਇਸ ਦੀ ਬਜਾਏ, ਮੈਂ ਇੱਕ ਵੱਖਰਾ ਤਰੀਕਾ ਵਰਤਿਆ:
• ਮੈਂ useRef ਦੇ ਅੰਦਰ ਇੱਕ Map ਬਣਾਇਆ। • ਇਹ Map ਪੇਰੈਂਟ ਐਲੀਮੈਂਟਸ ਨਾਲ ਜੁੜੇ ਬੰਦ ਕਰਨ ਵਾਲੇ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ। • ਜਦੋਂ ਨੈਵੀਗੇਸ਼ਨ ਐਰੇ (array) ਦੀ ਮੰਗ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਸਿਸਟਮ ਇਹਨਾਂ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਆਬਜੈਕਟਾਂ ਵਿੱਚ ਇੰਜੈਕਟ ਕਰ ਦਿੰਦਾ ਹੈ। • Ref ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ ਮੈਂ re-render ਨੂੰ ਟ੍ਰਿਗਰ ਕੀਤੇ ਬਿਨਾਂ ਇਹਨਾਂ ਕਨੈਕਸ਼ਨਾਂ ਨੂੰ ਅਪਡੇਟ ਕਰ ਸਕਦਾ ਹਾਂ।
ਇਹ ਸਾਫ਼ ਅਤੇ ਅਨੁਮਾਨਯੋਗ (predictable) ਮੀਨੂ ਵਿਵਹਾਰ ਲਈ ਨੀਂਹ ਰੱਖਦਾ ਹੈ।
ਅਗਲੇ ਪੜਾਅ ਵਿੱਚ, ਮੈਂ ਉਹਨਾਂ ਸਬਲਿਸਟਾਂ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ ਅਸਲ ਲੌਜਿਕ ਨੂੰ ਲਾਗੂ ਕਰਾਂਗਾ।
ਸਰੋਤ: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l