ARIA ਲੇਬਲਾਂ ਨਾਲ ਤੁਹਾਡੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕੈਲੰਡਰ ਦੇ ਹਿੱਸੇ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣਾ
ਪਹੁੰਚਯੋਗਤਾ ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਪਹਿਲੂ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਐਪਲੀਕੇਸ਼ਨਾਂ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਸੰਮਲਿਤ ਹਨ। ਪ੍ਰਤੀਕਿਰਿਆ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ, ਜਿਵੇਂ ਕਿ ਭਾਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਡੇਅਪਿਕਰ ਕੈਲੰਡਰ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ UIs ਵਿਲੱਖਣ ਚੁਣੌਤੀਆਂ ਪੇਸ਼ ਕਰ ਸਕਦੇ ਹਨ ਜਦੋਂ ਉਹਨਾਂ ਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਲਈ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।
ਹਾਲ ਹੀ ਵਿੱਚ, ਮੈਂ ਇੱਕ ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਕੰਮ ਕੀਤਾ ਜਿੱਥੇ ਮੈਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਜੋੜਨ ਦੀ ਲੋੜ ਸੀ ARIA ਲੇਬਲ a ਵਿੱਚ ਵਿਅਕਤੀਗਤ ਦਿਨ ਦੇ ਤੱਤਾਂ ਨੂੰ ਡੇਅਪਿਕਰ ਕੰਪੋਨੈਂਟ। ਟੀਚਾ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਅਰਥਪੂਰਨ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਨਾ ਸੀ ਜਿਵੇਂ ਕਿ "ਚੁਣੀ ਗਈ ਮਿਤੀ: 1 ਜਨਵਰੀ, 2024" ਜਾਂ "ਅਣਉਪਲਬਧ ਮਿਤੀ: 2 ਜਨਵਰੀ, 2024" ਹਰ ਦਿਨ ਦੀ ਸਥਿਤੀ ਦੇ ਆਧਾਰ 'ਤੇ।
ਪਹਿਲਾਂ, ਮੈਂ ਸਟੈਂਡਰਡ ਹੱਲਾਂ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਜਿਵੇਂ ਕਿ ariaLabelFormatter ਜਾਂ ਰੈਂਡਰਡੇ, ਪਰ ਛੇਤੀ ਹੀ ਅਹਿਸਾਸ ਹੋਇਆ ਕਿ ਪ੍ਰਤੀਕਿਰਿਆ-ਦਿਨ-ਚੋਣਕਾਰ ਲਾਇਬ੍ਰੇਰੀ ਵਿੱਚ ਅਜਿਹੇ ਪ੍ਰੋਪਸ ਲਈ ਬਿਲਟ-ਇਨ ਸਮਰਥਨ ਦੀ ਘਾਟ ਹੈ। ਮੇਰੀ ਅਗਲੀ ਪ੍ਰਵਿਰਤੀ DOM ਪੋਸਟ-ਰੈਂਡਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਰਾਫੇਰੀ ਕਰਨਾ ਸੀ ਵਰਤੋਂ ਰੈਫ ਅਤੇ ਪ੍ਰਭਾਵ ਦੀ ਵਰਤੋਂ ਕਰੋ. ਕਾਰਜਸ਼ੀਲ ਹੋਣ ਦੇ ਦੌਰਾਨ, ਇਹ ਪਹੁੰਚ ਕਮਜ਼ੋਰ ਮਹਿਸੂਸ ਕਰਦੀ ਹੈ ਅਤੇ ਕਲਾਸ ਦੇ ਨਾਮਾਂ 'ਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਨਿਰਭਰ ਕਰਦੀ ਹੈ। 😕
ਇਹ ਲੇਖ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਵਿੱਚ ARIA ਲੇਬਲਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਜੋੜਨ ਲਈ ਇੱਕ ਹੋਰ ਮਜ਼ਬੂਤ ਹੱਲ ਵੱਲ ਲੈ ਜਾਵੇਗਾ ਡੇਅਪਿਕਰ ਦਿਨ ਭਾਵੇਂ ਤੁਸੀਂ ਚੁਣੀਆਂ, ਅਯੋਗ, ਜਾਂ ਅਣਉਪਲਬਧ ਸਥਿਤੀਆਂ ਨਾਲ ਕੰਮ ਕਰ ਰਹੇ ਹੋ, ਅਸੀਂ ਯਕੀਨੀ ਬਣਾਵਾਂਗੇ ਕਿ ਤੁਹਾਡਾ ਕੈਲੰਡਰ ਪਹੁੰਚਯੋਗ ਅਤੇ ਸਕ੍ਰੀਨ-ਰੀਡਰ-ਅਨੁਕੂਲ ਰਹੇ। ਆਓ ਅੰਦਰ ਡੁਬਕੀ ਕਰੀਏ! 🚀
ਹੁਕਮ | ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ |
---|---|
useRef | const calendarRef = useRef(null); ਡੇਪਿਕਰ ਕੰਪੋਨੈਂਟ ਦੇ DOM ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਐਕਸੈਸ ਕਰਨ ਅਤੇ ਹੇਰਾਫੇਰੀ ਕਰਨ ਲਈ ਇੱਕ ਪਰਿਵਰਤਨਸ਼ੀਲ ਹਵਾਲਾ ਆਬਜੈਕਟ ਬਣਾਉਂਦਾ ਹੈ। |
querySelectorAll | calendarRef.current.querySelectorAll(."rdp-day"); ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਸਾਰੇ ਤੱਤ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ rdp-ਦਿਨ ਹੋਰ ਹੇਰਾਫੇਰੀ ਲਈ ਡੇਪਿਕਰ ਕੰਪੋਨੈਂਟ ਦੇ ਅੰਦਰ ਕਲਾਸ। |
setAttribute | day.setAttribute("aria-label", ariaLabel); ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਜੋੜਦਾ ਜਾਂ ਸੋਧਦਾ ਹੈ aria-ਲੇਬਲ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਲਈ ਪਹੁੰਚਯੋਗਤਾ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ। |
components | components={{ ਦਿਨ: ਰੈਂਡਰਡੇ }} ਹਰ ਦਿਨ ਦੀ ਡਿਫੌਲਟ ਰੈਂਡਰਿੰਗ ਨੂੰ ਬਦਲਣ ਲਈ ਇੱਕ ਕਸਟਮ ਫੰਕਸ਼ਨ ਇੰਜੈਕਟ ਕਰਦਾ ਹੈ, ARIA ਲੇਬਲ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। |
modifiers | modifiers={{ ਸੀਮਿਤ: calendarDates.limited }} ਦਿੱਖ ਅਤੇ ਕਾਰਜਾਤਮਕ ਤੌਰ 'ਤੇ ਦਿਨਾਂ ਨੂੰ ਵੱਖਰਾ ਕਰਨ ਲਈ ਡੇਅਪਿਕਰ ਦੇ ਅੰਦਰ ਖਾਸ ਦਿਨ ਅਵਸਥਾਵਾਂ (ਉਦਾਹਰਨ ਲਈ, ਸੀਮਤ, ਅਣਉਪਲਬਧ) ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। |
aria-label | ਸਕਰੀਨ ਰੀਡਰਾਂ ਵਰਗੀਆਂ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਲਈ ਉਹਨਾਂ ਨੂੰ ਸਮਝਣਯੋਗ ਅਤੇ ਨੈਵੀਗੇਬਲ ਬਣਾਉਣ, ਦਿਨਾਂ ਵਿੱਚ ਇੱਕ ਅਰਥ ਸੰਬੰਧੀ ਵਰਣਨ ਜੋੜਦਾ ਹੈ। |
getByLabelText | screen.getByLabelText("ਚੁਣੀ ਮਿਤੀ: 1 ਜਨਵਰੀ"); ਯੂਨਿਟ ਟੈਸਟਾਂ ਵਿੱਚ, ਇਹ ਉਹਨਾਂ ਦੁਆਰਾ ਤੱਤਾਂ ਦੀ ਪੁੱਛਗਿੱਛ ਕਰਦਾ ਹੈ aria-ਲੇਬਲ ਵਿਸ਼ੇਸ਼ਤਾ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਪਹੁੰਚਯੋਗਤਾ ਲੇਬਲ ਸਹੀ ਢੰਗ ਨਾਲ ਲਾਗੂ ਕੀਤੇ ਗਏ ਹਨ। |
useEffect | useEffect(() => {...}, [calendarDates]); ਡੇਪਿਕਰ ਰੈਂਡਰ ਤੋਂ ਬਾਅਦ ਤਰਕ ਨੂੰ ਲਾਗੂ ਕਰਦਾ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਕੈਲੰਡਰ ਸਥਿਤੀ ਬਦਲਣ 'ਤੇ ARIA ਲੇਬਲ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। |
modifiersStyles | modifierStyles={{ ਸੀਮਿਤ: ਸੀਮਿਤ ਸ਼ੈਲੀ }} ਖਾਸ ਦਿਨ ਸੰਸ਼ੋਧਕਾਂ 'ਤੇ ਕਸਟਮ ਸਟਾਈਲਿੰਗ ਲਾਗੂ ਕਰਦਾ ਹੈ, ਉਹਨਾਂ ਦੇ ਰਾਜਾਂ ਨੂੰ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਵੱਖਰਾ ਬਣਾਉਂਦਾ ਹੈ। |
generateAriaLabel | ਜਨਰੇਟ ਏਰੀਆ ਲੇਬਲ(ਦਿਨ, ਸੋਧਕ) ਇੱਕ ਉਪਯੋਗਤਾ ਫੰਕਸ਼ਨ ਜੋ ਇੱਕ ਦਿਨ ਦੀ ਸਥਿਤੀ ਦੇ ਅਧਾਰ 'ਤੇ ਸੰਦਰਭ-ਵਿਸ਼ੇਸ਼ ARIA ਲੇਬਲਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਤਿਆਰ ਕਰਦਾ ਹੈ। |
ਡੇਪਿਕਰ ਲਈ ਡਾਇਨਾਮਿਕ ARIA ਲੇਬਲ: ਇੱਕ ਡੂੰਘਾਈ ਨਾਲ ਗਾਈਡ
ਬਣਾਉਣ ਵੇਲੇ ਏ ਕੈਲੰਡਰ ਭਾਗ DayPicker ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਪ੍ਰਤੀਕਿਰਿਆ ਵਿੱਚ, ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਲਈ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣਾ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦਾ ਹੈ। ਮੁੱਖ ਚੁਣੌਤੀ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਜੋੜਨ ਵਿੱਚ ਹੈ ARIA ਲੇਬਲ ਦਿਨ ਦੇ ਤੱਤ, ਇਸ ਲਈ ਉਹ "ਚੁਣੇ ਗਏ," "ਅਯੋਗ" ਜਾਂ "ਉਪਲਬਧ" ਵਰਗੀਆਂ ਸਥਿਤੀਆਂ ਦਾ ਸੰਚਾਰ ਕਰਦੇ ਹਨ। ਇਸ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ, ਅਸੀਂ ਦੋ ਪਹੁੰਚਾਂ ਨੂੰ ਨਿਯੁਕਤ ਕੀਤਾ: ਪੋਸਟ-ਰੈਂਡਰ DOM ਹੇਰਾਫੇਰੀ ਅਤੇ ਇੱਕ ਕਸਟਮ ਰੈਂਡਰਿੰਗ ਫੰਕਸ਼ਨ। ਆਉ ਇਸ ਨੂੰ ਤੋੜੀਏ ਕਿ ਇਹ ਹੱਲ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਮੁੱਖ ਭਾਗ। 🗓️
ਪਹਿਲਾ ਹੱਲ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਪੋਸਟ-ਰੈਂਡਰ DOM ਹੇਰਾਫੇਰੀ ਪ੍ਰਤੀਕਰਮ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਵਰਤੋਂ ਰੈਫ ਅਤੇ ਪ੍ਰਭਾਵ ਦੀ ਵਰਤੋਂ ਕਰੋ. `useRef` ਦੇ ਨਾਲ ਡੇਅਪਿਕਰ ਕੰਪੋਨੈਂਟ ਦਾ ਹਵਾਲਾ ਬਣਾ ਕੇ, ਅਸੀਂ ਰੈਂਡਰ ਕੀਤੇ DOM ਨੋਡਾਂ ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਦੇ ਹਾਂ। ਇੱਕ `useEffect` ਹੁੱਕ ਦੇ ਅੰਦਰ, ਅਸੀਂ `querySelectorAll` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਾਰੇ ਦਿਨ ਦੇ ਤੱਤਾਂ (`rdp-day`) ਦੀ ਪੁੱਛਗਿੱਛ ਕਰਦੇ ਹਾਂ। ਹਰ ਦਿਨ ਲਈ, ਅਸੀਂ ਇਸਦੀ ਸਥਿਤੀ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਇਸਦੇ ਕਲਾਸ ਦੇ ਨਾਮਾਂ ਦੀ ਜਾਂਚ ਕਰਦੇ ਹਾਂ। ਜੇਕਰ ਕਿਸੇ ਦਿਨ ਵਿੱਚ “rdp-day_selected” ਕਲਾਸ ਹੈ, ਤਾਂ ਅਸੀਂ ਇੱਕ ARIA ਲੇਬਲ ਜੋੜਦੇ ਹਾਂ ਜਿਵੇਂ “ਚੁਣੀ ਮਿਤੀ: 1 ਜਨਵਰੀ, 2024।” ਇਹ ਵਿਧੀ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਜਦੋਂ ਵੀ ਕੈਲੰਡਰ ਸਥਿਤੀ ਬਦਲਦੀ ਹੈ ਤਾਂ ARIA ਲੇਬਲ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਅੱਪਡੇਟ ਹੁੰਦੇ ਹਨ।
ਦੂਜਾ ਹੱਲ a ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਕੇ ਇੱਕ ਸਾਫ਼, ਵਧੇਰੇ ਪ੍ਰਤੀਕਿਰਿਆ-ਅਨੁਕੂਲ ਪਹੁੰਚ ਲੈਂਦਾ ਹੈ ਕਸਟਮ ਰੈਂਡਰ ਫੰਕਸ਼ਨ. ਡੇਅਪਿਕਰ ਵਿੱਚ, ਅਸੀਂ ਦਿਨ ਦੇ ਤੱਤਾਂ ਦੀ ਰੈਂਡਰਿੰਗ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ 'ਕੰਪੋਨੈਂਟਸ' ਪ੍ਰੋਪ ਦੁਆਰਾ ਇੱਕ ਕਸਟਮ ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਕਸਟਮ ਫੰਕਸ਼ਨ ਹਰ ਦਿਨ ਅਤੇ ਇਸਦੇ ਸਟੇਟ ਮੋਡੀਫਾਇਰ ਨੂੰ ਪੈਰਾਮੀਟਰਾਂ ਵਜੋਂ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਇੱਕ ਸਹਾਇਕ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਅਸੀਂ ਹਰ ਦਿਨ ਦੀ ਸਥਿਤੀ (ਉਦਾਹਰਨ ਲਈ, ਚੁਣਿਆ, ਅਯੋਗ) ਦੇ ਆਧਾਰ 'ਤੇ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ARIA ਲੇਬਲ ਤਿਆਰ ਕਰਦੇ ਹਾਂ। ਉਦਾਹਰਨ ਲਈ, “ਅਣਉਪਲਬਧ ਮਿਤੀ: 2 ਜਨਵਰੀ, 2024” ਅਯੋਗ ਵਜੋਂ ਚਿੰਨ੍ਹਿਤ ਕੀਤੇ ਦਿਨਾਂ ਲਈ ਨਿਰਧਾਰਤ ਕੀਤੀ ਗਈ ਹੈ। ਇਹ ਪਹੁੰਚ DOM ਹੇਰਾਫੇਰੀ ਤੋਂ ਬਚਦਾ ਹੈ ਅਤੇ ਹੱਲ ਨੂੰ ਹੋਰ ਸੰਭਾਲਣ ਯੋਗ ਰੱਖਦਾ ਹੈ।
ਦੋਵਾਂ ਤਰੀਕਿਆਂ ਦੇ ਆਪਣੇ ਫਾਇਦੇ ਅਤੇ ਨੁਕਸਾਨ ਹਨ. ਜਦੋਂ ਕਿ ਪੋਸਟ-ਰੈਂਡਰ DOM ਹੇਰਾਫੇਰੀ ਸਾਨੂੰ ਰੈਂਡਰ ਕੀਤੇ ਆਉਟਪੁੱਟ 'ਤੇ ਨਿਯੰਤਰਣ ਦਿੰਦੀ ਹੈ, ਇਹ ਕਲਾਸ ਦੇ ਨਾਵਾਂ 'ਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਨਿਰਭਰ ਕਰਦਾ ਹੈ, ਜੋ ਲਾਇਬ੍ਰੇਰੀ ਅਪਡੇਟਾਂ ਨਾਲ ਬਦਲ ਸਕਦਾ ਹੈ। ਦੂਜੇ ਪਾਸੇ, 'ਕੰਪੋਨੈਂਟਸ' ਪ੍ਰੋਪ ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ ਰੀਐਕਟ ਦੇ ਘੋਸ਼ਣਾਤਮਕ ਪੈਰਾਡਾਈਮ ਨਾਲ ਬਿਹਤਰ ਢੰਗ ਨਾਲ ਇਕਸਾਰ ਹੋ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਕੋਡ ਨੂੰ ਕਲੀਨਰ ਅਤੇ ਡੀਬੱਗ ਕਰਨਾ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ। ਆਖਰਕਾਰ, ਇਹਨਾਂ ਪਹੁੰਚਾਂ ਵਿਚਕਾਰ ਚੋਣ ਤੁਹਾਡੀਆਂ ਪ੍ਰੋਜੈਕਟ ਲੋੜਾਂ ਅਤੇ ਲਾਇਬ੍ਰੇਰੀ ਦੀਆਂ ਰੁਕਾਵਟਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ। ਕਿਸੇ ਵੀ ਤਰ੍ਹਾਂ, ਅੰਤਮ ਨਤੀਜਾ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਕੈਲੰਡਰ ਉਹਨਾਂ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਪਹੁੰਚਯੋਗ ਹੈ ਜੋ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ, ਸਾਰਿਆਂ ਲਈ ਉਪਯੋਗਤਾ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੇ ਹਨ। 🌟
ਡੇਅਪਿਕਰ ਕੰਪੋਨੈਂਟ ਨੂੰ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨ ਲਈ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ARIA ਲੇਬਲਾਂ ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ
React, JavaScript, ਅਤੇ ਅਨੁਕੂਲਿਤ ਢੰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਗਤੀਸ਼ੀਲ ARIA ਲੇਬਲ ਪ੍ਰਬੰਧਨ
// Solution 1: Adding ARIA labels with post-render DOM Manipulation
import React, { useEffect, useRef } from "react";
import { DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";
const AccessibleDayPicker = ({ calendarDates, startDate, endDate }) => {
const calendarRef = useRef(null);
useEffect(() => {
if (calendarRef.current) {
const days = calendarRef.current.querySelectorAll(".rdp-day");
days.forEach((day) => {
const date = day.getAttribute("aria-label");
let ariaLabel = date;
if (day.classList.contains("rdp-day_selected")) {
ariaLabel = `Selected date: ${date}`;
} else if (day.classList.contains("rdp-day_disabled")) {
ariaLabel = `${date} is not available for selection.`;
}
day.setAttribute("aria-label", ariaLabel || date);
});
}
}, [calendarDates]);
return (
<div ref={calendarRef}>
<DayPicker
mode="single"
selected={calendarDates.selected}
onDayClick={() => {}}
showOutsideDays
disabled={{ before: startDate, after: endDate }}
modifiers={{
limited: calendarDates.limited,
unavailable: calendarDates.unavailable,
}}
/>
</div>
);
};
export default AccessibleDayPicker;
ਡੇਪਿਕਰ ਵਿੱਚ ARIA ਲੇਬਲਾਂ ਲਈ ਇੱਕ ਕਸਟਮ ਰੈਪਰ ਨੂੰ ਲਾਗੂ ਕਰਨਾ
ਫੰਕਸ਼ਨਲ ਕੰਪੋਨੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਪ੍ਰਤੀਕਿਰਿਆ-ਅਧਾਰਿਤ ARIA ਲੇਬਲ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ
// Solution 2: Using a Custom Wrapper to Assign ARIA Labels
import React from "react";
import { DayPicker } from "react-day-picker";
const CustomDayPicker = ({ calendarDates, startDate, endDate }) => {
const generateAriaLabel = (date, modifiers) => {
if (modifiers.selected) return `Selected date: ${date.toDateString()}`;
if (modifiers.disabled) return `${date.toDateString()} is not available.`;
return date.toDateString();
};
const renderDay = (day, modifiers) => (
<div aria-label={generateAriaLabel(day, modifiers)}>
{day.getDate()}
</div>
);
return (
<DayPicker
mode="single"
selected={calendarDates.selected}
disabled={{ before: startDate, after: endDate }}
modifiers={{
limited: calendarDates.limited,
unavailable: calendarDates.unavailable,
}}
components={{ Day: renderDay }}
/>
);
};
export default CustomDayPicker;
ARIA ਲੇਬਲ ਅਸਾਈਨਮੈਂਟ ਲਈ ਯੂਨਿਟ ਟੈਸਟ
ARIA ਲੇਬਲ ਦੀ ਇਕਸਾਰਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਜੈਸਟ ਅਤੇ ਰੀਐਕਟ ਟੈਸਟਿੰਗ ਲਾਇਬ੍ਰੇਰੀ
// Solution 3: Unit tests to validate ARIA label assignment
import React from "react";
import { render, screen } from "@testing-library/react";
import AccessibleDayPicker from "./AccessibleDayPicker";
import "@testing-library/jest-dom";
describe("AccessibleDayPicker ARIA labels", () => {
test("adds ARIA labels for selected and disabled days", () => {
const calendarDates = {
selected: new Date(2024, 0, 1),
unavailable: [new Date(2024, 0, 2)],
};
render(<AccessibleDayPicker calendarDates={calendarDates} />);
const selectedDay = screen.getByLabelText("Selected date: Monday, January 1, 2024");
expect(selectedDay).toBeInTheDocument();
const unavailableDay = screen.getByLabelText("Monday, January 2, 2024 is not available.");
expect(unavailableDay).toBeInTheDocument();
});
});
React DayPicker ਵਿੱਚ ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੀ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣਾ
ਜੋੜ ਰਿਹਾ ਹੈ ARIA ਲੇਬਲ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਪਰ ਇੱਕ React DayPicker ਵਿੱਚ ਇੱਕ ਸੰਮਲਿਤ ਅਨੁਭਵ ਬਣਾਉਣ ਲਈ ਹੋਰ ਵੀ ਬਹੁਤ ਕੁਝ ਹੈ। ਇੱਕ ਨਜ਼ਰਅੰਦਾਜ਼ ਪਹਿਲੂ ਯਕੀਨੀ ਬਣਾ ਰਿਹਾ ਹੈ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਫੋਕਸ ਪ੍ਰਬੰਧਨ. ਸਕ੍ਰੀਨ ਰੀਡਰ ਉਪਭੋਗਤਾ ਕੈਲੰਡਰਾਂ ਵਰਗੇ ਇੰਟਰਐਕਟਿਵ ਭਾਗਾਂ ਨੂੰ ਪਾਰ ਕਰਨ ਲਈ ਕੀਬੋਰਡ ਇਨਪੁਟਸ 'ਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਭਰੋਸਾ ਕਰਦੇ ਹਨ। ਡੇਅਪਿਕਰ, ਬਾਕਸ ਤੋਂ ਬਾਹਰ, ਬੁਨਿਆਦੀ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ, ਪਰ ਇਸਨੂੰ ARIA ਲੇਬਲਾਂ ਦੇ ਨਾਲ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਇਸਨੂੰ ਹੋਰ ਅਨੁਭਵੀ ਬਣਾ ਸਕਦਾ ਹੈ।
ਖੋਜ ਕਰਨ ਲਈ ਇੱਕ ਹੋਰ ਖੇਤਰ ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ (i18n) ਸਹਾਇਤਾ ਹੈ। ਜੇਕਰ ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਵਿਭਿੰਨ ਖੇਤਰਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ, ਤਾਂ ARIA ਲੇਬਲਾਂ ਨੂੰ ਸਥਾਨਕ ਮਿਤੀ ਫਾਰਮੈਟ ਅਤੇ ਭਾਸ਼ਾ ਨੂੰ ਦਰਸਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, “1 ਜਨਵਰੀ, 2024” ਦੀ ਬਜਾਏ, ਇੱਕ ਫ੍ਰੈਂਚ ਉਪਭੋਗਤਾ ਨੂੰ “1 Janvier 2024” ਸੁਣਨਾ ਚਾਹੀਦਾ ਹੈ। ਲਾਇਬ੍ਰੇਰੀਆਂ ਜਿਵੇਂ `react-intl` ਜਾਂ ਮੂਲ JavaScript `Intl.DateTimeFormat` ਵੱਖ-ਵੱਖ ਲੋਕੇਲਾਂ ਵਿੱਚ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਲਈ ਇਹਨਾਂ ਲੇਬਲਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੀਆਂ ਹਨ।
ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਮੌਜੂਦਾ ਫੋਕਸ ਜਾਂ ਇੱਕ ਦਿਨ ਦੀ ਸਥਿਤੀ ਨੂੰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਰੂਪ ਵਿੱਚ ਦਰਸਾ ਕੇ ਪਹੁੰਚਯੋਗਤਾ ਵਿੱਚ ਹੋਰ ਸੁਧਾਰ ਕਰ ਸਕਦੇ ਹੋ। ਕਸਟਮ ਨੂੰ ਜੋੜਨਾ CSS ਕਲਾਸਾਂ ARIA ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਿਵੇਂ `aria-current="date"` ਨਾਲ ਵਿਜ਼ੂਅਲ ਅਤੇ ਅਰਥ-ਵਿਵਸਥਾ ਦੋਵਾਂ ਦੀ ਪਹੁੰਚ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਸੰਦਰਭ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ ਅੱਜ ਦੀ ਤਾਰੀਖ ਨੂੰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਰੂਪ ਵਿੱਚ ਉਜਾਗਰ ਕਰ ਸਕਦੇ ਹੋ। ਪੋਲਿਸ਼ ਦਾ ਇਹ ਪੱਧਰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਡੇਪਿਕਰ ਨਾ ਸਿਰਫ਼ ਕੰਮ ਕਰਦਾ ਹੈ ਬਲਕਿ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਸੰਮਲਿਤ ਹੋਣ 'ਤੇ ਵੀ ਉੱਤਮ ਹੈ। 🎯
DayPicker ਵਿੱਚ ARIA Labels ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ
- ਕੀ ਹਨ ARIA labels DayPicker ਵਿੱਚ ਲਈ ਵਰਤਿਆ ਗਿਆ ਹੈ?
- ARIA ਲੇਬਲ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਲਈ ਪਹੁੰਚਯੋਗ ਵਰਣਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ "ਚੁਣੀਆਂ" ਜਾਂ "ਅਯੋਗ" ਵਰਗੀਆਂ ਦਿਨਾਂ ਦੀਆਂ ਸਥਿਤੀਆਂ ਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ।
- ਮੈਂ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਾਂ ARIA attributes DOM ਹੇਰਾਫੇਰੀ ਦੀ ਵਰਤੋਂ ਕੀਤੇ ਬਿਨਾਂ?
- ਡੇਅਪਿਕਰ ਦੀ ਵਰਤੋਂ ਕਰਨਾ components ਪ੍ਰੋਪ, ਤੁਸੀਂ ਦਿਨ ਦੀ ਰੈਂਡਰਿੰਗ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਸਿੱਧੇ ARIA ਲੇਬਲ ਜੋੜ ਸਕਦੇ ਹੋ।
- ਕੀ ਮੈਂ ਸਥਾਨੀਕਰਨ ਕਰ ਸਕਦਾ ਹਾਂ ARIA labels ਅੰਤਰਰਾਸ਼ਟਰੀ ਉਪਭੋਗਤਾਵਾਂ ਲਈ?
- ਹਾਂ, ਤੁਸੀਂ ਵਰਤ ਕੇ ਤਾਰੀਖਾਂ ਨੂੰ ਫਾਰਮੈਟ ਕਰ ਸਕਦੇ ਹੋ Intl.DateTimeFormat ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ARIA ਲੇਬਲ ਸਥਾਨਕ ਮਿਤੀ ਫਾਰਮੈਟਾਂ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ।
- ਮੈਂ ਕਿਵੇਂ ਸੁਧਾਰ ਕਰਾਂ keyboard navigation ARIA ਲੇਬਲ ਦੇ ਨਾਲ?
- ਡੇਅਪਿਕਰ ਮੂਲ ਰੂਪ ਵਿੱਚ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ, ਪਰ ਕਸਟਮ ਜੋੜ ਰਿਹਾ ਹੈ focus styles ਉਪਯੋਗਤਾ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਦੋਵਾਂ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ।
- ਕੀ ਗਤੀਸ਼ੀਲ ਜੋੜਨ ਵੇਲੇ ਕੋਈ ਪ੍ਰਦਰਸ਼ਨ ਲਾਗਤ ਹੈ ARIA attributes?
- ਰੀਐਕਟ ਦੀ ਸਥਿਤੀ ਅਤੇ ਪ੍ਰੋਪਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ARIA ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਲਾਗੂ ਕਰਨਾ ਓਵਰਹੈੱਡ ਦੇ ਘੱਟੋ-ਘੱਟ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ।
ਡਾਇਨਾਮਿਕ ARIA ਲੇਬਲਾਂ ਨਾਲ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣਾ
ਜੋੜ ਰਿਹਾ ਹੈ ARIA ਲੇਬਲ ਡੇਅਪਿਕਰ ਲਈ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਲਈ ਵਿਅਕਤੀਗਤ ਦਿਨ ਦੇ ਤੱਤਾਂ ਦੀ ਸਥਿਤੀ ਦਾ ਵਰਣਨ ਕਰਕੇ ਪਹੁੰਚਯੋਗਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ। ਇਹ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ 'ਤੇ ਭਰੋਸਾ ਕਰਨ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇੱਕ ਸਹਿਜ ਅਨੁਭਵ ਬਣਾਉਂਦਾ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ "ਚੁਣੀਆਂ" ਜਾਂ "ਅਣਉਪਲਬਧ" ਵਰਗੀਆਂ ਮੁੱਖ ਸਥਿਤੀਆਂ ਸਪਸ਼ਟ ਹਨ। ✅
ਰਿਐਕਟ ਹੁੱਕ ਅਤੇ ਕਸਟਮ ਰੈਂਡਰਿੰਗ ਪਹੁੰਚਾਂ ਨੂੰ ਜੋੜ ਕੇ, ਅਸੀਂ ਇੱਕ ਅਜਿਹਾ ਹੱਲ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ ਜੋ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਅਤੇ ਰੱਖ-ਰਖਾਅਯੋਗ ਹੈ। ਭਾਵੇਂ ਸਿੱਧੇ DOM ਹੇਰਾਫੇਰੀ ਜਾਂ ਘੋਸ਼ਣਾਤਮਕ ਪ੍ਰੋਪਸ ਦੁਆਰਾ, ਫੋਕਸ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਪਹੁੰਚਯੋਗ ਇੱਕ ਸੰਮਲਿਤ ਕੈਲੰਡਰ ਇੰਟਰਫੇਸ ਪ੍ਰਦਾਨ ਕਰਨ 'ਤੇ ਰਹਿੰਦਾ ਹੈ। 🌟
React DayPicker ਵਿੱਚ ਪਹੁੰਚਯੋਗ ARIA ਲੇਬਲਾਂ ਲਈ ਸਰੋਤ ਅਤੇ ਹਵਾਲੇ
- ਅਧਿਕਾਰੀ 'ਤੇ ਵਿਸਥਾਰ ਨਾਲ ਦੱਸਦਾ ਹੈ ਪ੍ਰਤੀਕਿਰਿਆ-ਦਿਨ-ਚੋਣਕਾਰ ਕੰਪੋਨੈਂਟ ਫੰਕਸ਼ਨੈਲਿਟੀਜ਼ ਅਤੇ ਮੋਡੀਫਾਇਰ ਦੀ ਪੜਚੋਲ ਕਰਨ ਲਈ ਲਾਇਬ੍ਰੇਰੀ ਦਸਤਾਵੇਜ਼। 'ਤੇ ਹੋਰ ਲੱਭੋ ਪ੍ਰਤੀਕਿਰਿਆ-ਦਿਨ-ਚੋਣਕਾਰ ਦਸਤਾਵੇਜ਼ .
- ਤੋਂ ਪਹੁੰਚਯੋਗਤਾ ਦੀ ਮਹੱਤਤਾ ਅਤੇ ARIA ਦੇ ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸਾਂ ਦਾ ਹਵਾਲਾ ਦਿੰਦਾ ਹੈ MDN ਵੈੱਬ ਡੌਕਸ. ARIA ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਾਰੇ ਵਿਸਤ੍ਰਿਤ ਮਾਰਗਦਰਸ਼ਨ 'ਤੇ ਉਪਲਬਧ ਹੈ MDN ARIA ਦਸਤਾਵੇਜ਼ .
- ਵਿੱਚ ਸਾਂਝੀ ਕੀਤੀ ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਸਕ੍ਰੀਨ ਰੀਡਰ ਅਨੁਕੂਲਤਾ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਸੰਕਲਪਾਂ ਦੀ ਪੜਚੋਲ ਕਰਦਾ ਹੈ WebAIM'ਤੇ ਪਾਇਆ ਜਾ ਸਕਦਾ ਹੈ WebAIM: ਮਨ ਵਿੱਚ ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ .