Skip to content

Accessibility label mismatch in Year Selector viewย #214

@aswani-aman

Description

@aswani-aman

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

Image

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! ๐Ÿ™Œ

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions