Screen Reader: Global: Currently selected bottom tab is not announced as such #77562
Description
Action Performed:
Precondition: User is logged in
- Using VoiceOver on iOS or TalkBack on Android, open the app
- On the Inbox screen, swipe right to focus the Inbox tab in the bottom navigation bar and note how it is announced
This is a global issue occurring in all bottom navigation bar tabs
Expected Result:
The currently selected navigation bar tab should be announced with its state, e.g.:
"Inbox, button, selected".
Actual Result:
The currently selected tab is visually marked up as such, but VoiceOver/TalkBack does not announce that it is selected.
Screen reader users cannot distinguish which tab is active.
Area issue was found in:
Inbox
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 accessibilityState prop to indicate the selected tab to ensure it is announced with its selected state by screen readers, e.g.:
"Inbox, button, selected".
Refer to:
https://appt.org/en/docs/react-native/samples/accessibility-state
https://reactnative.dev/docs/accessibility#accessibilitystate
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
Bug7005806_1763523460527.Currently_selected_bottom_tab_is_not_announced_as_such.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/7005806
Issue reported by: NA
Slack conversation: NA