-
-
Notifications
You must be signed in to change notification settings - Fork 97
Description
Hi ๐,
I noticed an accessibility issue in the Year Selector view of the react-native-ui-datepicker component.
๐ Issue
When a screen reader (e.g., TalkBack or VoiceOver) user enters the Year Selector view:
The visible label on the button updates correctly to show a range of years, e.g., 2016 - 2027.
However, when the user focuses on the button using accessibility navigation, the screen reader reads out only the currently active year (e.g., 2020) instead of the full year range.
๐ฏ Expected Behavior
The accessibility label should accurately reflect the visual content of the button. Specifically:
If the visible label shows 2016 - 2027, then the accessibility label should also announce 2016 to 2027, or something similarly descriptive.
This will improve clarity and usability for screen reader users, ensuring they understand they're navigating a year range, not just a single year.
โ
Steps to Reproduce
Navigate to the date picker and enter Year Selector view.
Use a screen reader (TalkBack on Android or VoiceOver on iOS).
Focus on the button showing the year range.
Observe the spoken labelโit announces only the currently focused year instead of the full range.
Platform: [Android / iOS / Both]
This is where a change needs to be made: year-button.tsx
There are additional changes also required related to accessibility in some other parts of the repo as well. Let me know if youโd like me to submit a PR for this. Thanks for your great work on this component! ๐
