Add VoiceOver for chat list items

[dubielzyk-expensify]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Turn on VoiceOver in (Settings -> Accessibility -> VoiceOver)
2. Go to the Expensify App
3. Go to the Inbox tab/screen
4. Select a chat item in the chat list
5. Listen to the VoiceOver label

Expected Result:

Expected the VoiceOver to read the contents of a chat list

Actual Result:

VoiceOver reads "Navigates to a chat. Button" instead which isn't helpful as you can't differentiate the items in the list

Workaround:

Don't think there is one.

Area issue was found in:

iOS and macOS devices

Failed WCAG checkpoints

What WCAG checkpoints were failed?
WCAG 4.1 as it's not compatible with assistive technologies. Blind or any users relying on Apples VoiceOver or other screen reading technologies would fall under this issue.

User impact:

How does this affect the user?
VoiceOver users would largely struggle to use 30% of the navigation of the app and a key highlight feature

Suggested resolution:

Add aria labels or similar treatment that's seen on the Reports screen

Platforms:

Which of our officially supported platforms is this issue occurring on? Please only tick the box if you have provided a screen-recording in the thread for each platform:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Version Number: v9.0.95-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers): N/A
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

611F27CB-58BE-4BCC-B738-5BDC1AC2E8EA.MP4

Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

View all open jobs on GitHub

[dubielzyk-expensify]

cc @Expensify/design for visibility

[thelullabyy]

Proposal

Please re-state the problem that we are trying to solve in this issue.

VoiceOver reads "Navigates to a chat. Button" instead which isn't helpful as you can't differentiate the items in the list

What is the root cause of that problem?

The VoiceOver based on:

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Line 238 in bf23769

accessibilityLabel={translate('accessibilityHints.navigatesToChat')}

and now, it is only "Navigates to a chat"

What changes do you think we should make in order to solve the problem?

We can update to accessibilityLabel={`${translate('accessibilityHints.navigatesToChat')} ${optionItem.text}`}. The exact text to be shown can be discussed later.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

In SidebarTest.ts, verify that the accessibility label for each option row is rendered properly

What alternative solutions did you explore? (Optional)