Screen Reader: Many Pages: The buttons are grouped with container, cannot focus and activate

[olenamihno]

Action Performed:

Precondition: User is logged in

1. Using VoiceOver on iOS, open the app
2. Swipe to focus the Account tab and double-tap to activate it
3. Swipe to focus the Wallet button and double-tap to activate it
4. Swipe to focus the Expensify card menu item and double-tap to activate it
5. Swipe and try to focus the Reveal details button next to the Virtual card number

Other Occurrences:

1. Group Chat > Start chat: the "Add to group" button in any contact button

Expected Result:

The Reveal details button should be individually focusable and operable. The users should be able to activate the button to reveal the full card number.

Actual Result:

The container of the Virtual card number is treated as a single accessible element, so the inner Reveal details button is not exposed to VoiceOver.

Area issue was found in:

Expensify Card

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:

Hide the outer container from the screen reader and make sure each element is focused and announced separately.
https://reactnative.dev/docs/accessibility#accessible
https://appt.org/en/docs/react-native/samples/accessibility-focusability

Environment:

Apple iPhone 14 Pro - iOS 18.7.1, Wi-Fi - Native (No mobile browser)

Screenshots/Videos

Bug7008123_1763623707421.Buttons_in_container_elements_are_not_focusable_or_operable.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/7008123
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 📖

[melvin-bot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!