Screen Reader: Many Pages: Options in bottom sheets are announced without a button role

[olenamihno]

Action Performed:

Precondition: User is logged in

1. Using VoiceOver on iOS, open the app
2. Swipe right to focus any chat and double-tap to activate it
3. Swipe right to focus the "+" button and double-tap to activate it
4. Note how the Add attachment button is announced
5. Double-tap to activate the Add attachment button
6. Note how the options in the bottom sheet are announced

Other Occurrences:

1. New Chat
2. Group Chat
3. Create (+) screen
4. Reports: Filter

Expected Result:

Each option in the Create and Add Attachment bottom sheets should be announced as a button:
"Add attachment, button"
"Take photo, button"
"Choose from gallery, button"
"Choose file, button".

Actual Result:

All bottom sheet options are announced only with their text and are missing the button accessible role.
Current announcement:
"Add attachment"
"Take photo"
"Choose from gallery"
"Choose file".

Area issue was found in:

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:

Assign accessibilityRole="button" to each option in the bottom sheet to ensure they are announced properly.
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)

Screenshots/Videos

Bug7009070_1763633344052.Options_in_bottom_sheets_are_announced_without_a_button_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/7009070
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 📖