Screen Reader: Many Pages: Date of Birth picker field announced without a role

[olenamihno]

Action Performed:

Prerequisites:

• the user is signed in

1. Using iOS VoiceOver or Android TalkBack, open the app
2. Navigate to Account - Profile.
3. Swipe to focus the Date picker
4. Note how the control is announced

Other Occurrences:

1. Create Expense > Confirm details > Date: same issue
2. Reports > Filters > Date > On/After/Before: same issue

Expected Result:

The Date of Birth field should be announced with a button or edit field role.

Actual Result:

The field is announced only as "Date" with no role conveyed, so screen reader users cannot tell that it is an interactive control.

Area issue was found in:

Profile Subsections

Failed WCAG checkpoints

WCAG 4.1.2 Name, Role, Value
https://www.w3.org/WAI/WCAG22/Understanding/name-role-value

User impact:

Providing role, state, and value information on all user interface components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software, used by people with disabilities.

Suggested resolution:

Use the button or edit field role to announce the control.
https://appt.org/en/docs/react-native/samples/accessibility-role
https://reactnative.dev/docs/accessibility#accessibilityrole

Environment:

Apple iPhone 14 Pro - iOS 18.7.1, Wi-Fi - Native (No mobile browser)
Samsung Galaxy Note10 Plus - Android 12, H0T Mobile - Native (No mobile browser)

Screenshots/Videos

Bug7005402_1763523324895.Date_of_Birth_picker_field_announced_without_a_role.mp4

Version Number: Production
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): No
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36628/community-issues/7005402
Issue reported by: NA
Slack conversation: NA

[melvin-bot]

📣 @olenamihno! 📣
Please report bugs or suggest features in the #expensify-open-source Slack channel, don't directly open issues in this repo!
Instructions here to join the channel 📖