𝗙𝗼𝗰𝘂𝘀 𝗜𝘀𝘀𝘂𝗲𝘀 𝗮𝗻𝗱 𝗥𝗲𝗳𝗶𝗻𝗲𝗺𝗲𝗻𝘁 𝗦𝘂𝗽𝗽𝗼𝗿𝘁
ಸುಲಭವಾಗಿ ಬಳಸಬಹುದಾದ (accessible) React ಘಟಕಗಳನ್ನು (components) ನಿರ್ಮಿಸಲು ಕೇವಲ ARIA ಲೇಬಲ್ಗಳನ್ನು ಸೇರಿಸುವುದು ಸಾಕಾಗುವುದಿಲ್ಲ. ಬಳಕೆದಾರರು ಕೀಬೋರ್ಡ್ ಮೂಲಕ ನಿಮ್ಮ ಇಂಟರ್ಫೇಸ್ನಲ್ಲಿ ಹೇಗೆ ಚಲಿಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ನೀವು ನಿರ್ವಹಿಸಬೇಕು.
ಮೊದಲಿನಿಂದಲೇ ಸಂಪೂರ್ಣವಾಗಿ ಸುಲಭವಾಗಿ ಬಳಸಬಹುದಾದ ನ್ಯಾವಿಗೇಷನ್ ಘಟಕವನ್ನು ನಿರ್ಮಿಸುವ ನನ್ನ ಪ್ರಯಾಣವನ್ನು ನಾನು ದಾಖಲಿಸುತ್ತಿದ್ದೇನೆ. ಈ ಅಪ್ಡೇಟ್ನಲ್ಲಿ, ನಾನು ಎರಡು ಪ್ರಮುಖ ವಿಷಯಗಳ ಮೇಲೆ ಗಮನ ಹರಿಸುತ್ತಿದ್ದೇನೆ: ಕೀಬೋರ್ಡ್ ಟ್ರ್ಯಾಪ್ಗಳನ್ನು (keyboard traps) ಸರಿಪಡಿಸುವುದು ಮತ್ತು ಸುಗಮವಾದ ಸಬ್ಲಿಸ್ಟ್ ನಿರ್ವಹಣೆಗೆ (sublist management) ಸಿದ್ಧತೆ ಮಾಡಿಕೊಳ್ಳುವುದು.
𝗧𝗵𝗲 𝗞𝗲𝘆𝗯𝗼𝗮𝗿𝗱 𝗧𝗿𝗮𝗽 𝗙𝗶𝘅
ಬಳಕೆದಾರರು ಘಟಕಕ್ಕೆ ಪ್ರವೇಶಿಸಲು Shift+Tab ಬಳಸಿದಾಗ ಒಂದು ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆ ಎದುರಾಗುತ್ತದೆ. ಒಂದು ವೇಳೆ ಮುಚ್ಚಿದ ಸಬ್ಲಿಸ್ಟ್ನ ಒಳಗಿರುವ ಲಿಂಕ್ ಮೇಲೆ ಫೋಕಸ್ ಬಿದ್ದರೆ, ಫೋಕಸ್ ಔಟ್ಲೈನ್ (focus outline) ಮಾಯವಾಗುತ್ತದೆ. ಇದು ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ದೊಡ್ಡ ತಪ್ಪಾಗಿದೆ.
ಇದನ್ನು ಸರಿಪಡಿಸಲು, ನಾನು ಲಾಜಿಕ್ನಲ್ಲಿ ಬದಲಾವಣೆ ಮಾಡಿದ್ದೇನೆ:
• ಒಂದು ವೇಳೆ ಫೋಕಸ್ ಮುಚ್ಚಿದ ಸಬ್ಲಿಸ್ಟ್ನ ಕೊನೆಯ ಅಂಶದ ಮೇಲೆ ಬಿದ್ದರೆ, ಸಿಸ್ಟಮ್ ಮೇಲಿನ ಸಾಲಿನ ಪೇರೆಂಟ್ ಬಟನ್ಗೆ (parent button) ಫೋಕಸ್ ಅನ್ನು ವರ್ಗಾಯಿಸುತ್ತದೆ. • ಈ ನಿರ್ದಿಷ್ಟ ಚಲನೆಯನ್ನು ಪತ್ತೆಹಚ್ಚಲು ನಾನು onFocus ಇವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಬಳಸುತ್ತೇನೆ. • ಫೋಕಸ್ ಆಗಿರುವ ಅಂಶವು ಘಟಕದ ಕೊನೆಯ ಅಂಶವೇ ಎಂದು ಈ ಲಾಜಿಕ್ ಪರಿಶೀಲಿಸುತ್ತದೆ. • ಅದು ಕೊನೆಯ ಅಂಶವಾಗಿದ್ದರೆ, ಕೋಡ್ ಮೇಲಿನ ಸಾಲಿನ ancestor ಅನ್ನು ಗುರುತಿಸಿ ಅಲ್ಲಿಗೆ ಫೋಕಸ್ ಅನ್ನು ವರ್ಗಾಯಿಸುತ್ತದೆ.
ಇದು ಬಳಕೆದಾರರು ಇಂಟರ್ಫೇಸ್ನಲ್ಲಿ ತಮ್ಮ ಸ್ಥಾನವನ್ನು ಎಂದಿಗೂ ಕಳೆದುಕೊಳ್ಳದಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ.
𝗦𝗲𝘁𝘁𝗶𝗻𝗴 𝗨𝗽 𝗦𝘂𝗯𝗹𝗶𝘀𝘁 𝗖𝗹𝗼𝘀𝗶𝗻𝗴
ನೀವು ಪೇರೆಂಟ್ ಮೆನುವನ್ನು ಮುಚ್ಚಿದಾಗ, ಅದರ ಒಳಗಿರುವ ಎಲ್ಲಾ ತೆರೆದ ಸಬ್ಮೆನುಗಳು ಸಹ ಮುಚ್ಚಲ್ಪಡಬೇಕು. ಪ್ರಮಾಣಿತ ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್ಗಳು ಈ ರೀತಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ.
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡದೆ React ನಲ್ಲಿ ಇದನ್ನು ನಿರ್ವಹಿಸಲು, ನಾನು state ನಲ್ಲಿ ಫಂಕ್ಷನ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸುವುದನ್ನು ತಪ್ಪಿಸಿದೆ. state ನಲ್ಲಿ ಫಂಕ್ಷನ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸುವುದು ಅನಗತ್ಯ re-renders ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.
ಬದಲಾಗಿ, ನಾನು ವಿಭಿನ್ನ ವಿಧಾನವನ್ನು ಬಳಸಿದೆ:
• ನಾನು useRef ಒಳಗೆ ಒಂದು Map ಅನ್ನು ರಚಿಸಿದೆ. • ಈ Map ಪೇರೆಂಟ್ ಅಂಶಗಳಿಗೆ ಸಂಬಂಧಿಸಿದ ಕ್ಲೋಸ್ ಫಂಕ್ಷನ್ಗಳನ್ನು (close functions) ಸಂಗ್ರಹಿಸುತ್ತದೆ. • ನ್ಯಾವಿಗೇಷನ್ ಅರೇ ಅನ್ನು ವಿನಂತಿಸಿದಾಗ, ಸಿಸ್ಟಮ್ ಈ ಫಂಕ್ಷನ್ಗಳನ್ನು ಆಬ್ಜೆಕ್ಟ್ಗಳಿಗೆ ಸೇರಿಸುತ್ತದೆ (injects). • Ref ಬಳಸುವುದರಿಂದ re-render ಅನ್ನು ಪ್ರಚೋದಿಸದೆ ಈ ಸಂಪರ್ಕಗಳನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡಲು ನನಗೆ ಸಾಧ್ಯವಾಗುತ್ತದೆ.
ಇದು ಸ್ವಚ್ಛ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಮೆನು ವರ್ತನೆಗೆ ಅಡಿಪಾಯವನ್ನು ಹಾಕುತ್ತದೆ.
ಮುಂದಿನ ಹಂತದಲ್ಲಿ, ಆ ಸಬ್ಲಿಸ್ಟ್ಗಳನ್ನು ಮುಚ್ಚಲು ನಾನು ನೈಜ ಲಾಜಿಕ್ ಅನ್ನು ಅಳವಡಿಸುತ್ತೇನೆ.
ಮೂಲ: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l