Screen Reader: Many Pages: The tab buttons are announced without a state

[olenamihno]

Action Performed:

Precondition: User is logged in

1. Using VoiceOver on iOS or TalkBack on Android, open the app
2. Swipe right to focus the Create tab and double-tap to activate it
3. Swipe right to focus the Start chat button and double-tap to activate it
4. Swipe right to focus the Chat, and Room tabs and note how they announced

Other Occurrences:

1. Create Expense: the tabs Manual and Scan

Expected Result:

The visually selected tab button should be announced with a selected state.

Actual Result:

The tab buttons Chat and Room are announced without a state.

Area issue was found in:

Group chat

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:

Add the accessibilityState prop to the selected buttons to ensure their state is exposed to screen readers.
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

Bug7007950_1763624642081.Tab_buttons_missing_programmatic_state.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/7007950
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 📖