Screen Reader: Many Pages: The displayed error message is not associated with the input field

[elisenwazuoke]

Action Performed:

Prerequisites:

• the user is signed in

1. Using Android TalkBack or iOS VoiceOver, open the Expensify app
2. Swipe to the 'Continue' button and double-tap to activate without entering the phone or email
3. Once the error message appears, swipe to focus the field in error.
4. Note what is naunced.

Other Occurrences:

1. On Sign In - Enter Code
2. Onboarding: all fields in the flow
3. On Inbox: the field 'Enter your boss's email'
4. On Profile - Display Name
5. On Profile - Date of Birth
6. On Profile - Address
7. On Profile - Legal Name
8. On Profile - Verify Email
9. On Security - Merge Accounts
10. On Security - Merge Accounts - Enter Code
11. On Security - Close Account
12. On Wallet - Add Bank Account
13. On Create Expense - Confirm Details
14. On Save the World - I know a teacher
15. On Create Workspace

Expected Result:

The error message should be announced together with the field's label and role.

Actual Result:

The displayed error message is not associated with the field.

Area issue was found in:

Where did we find this issue?

Failed WCAG checkpoints

WCAG 1.3.1 Info and Relationships
https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships

User impact:

Users with different disabilities employ assistive technology to adapt content according to their specific needs. For example, users who are blind (using a screen reader) benefit when information conveyed through color is also available in text (including text alternatives for images that use color to convey information), and users who are deaf-blind and use braille (text) refreshable displays may be unable to access color-dependent information.

Suggested resolution:

One way is to add the error message as part of accessibilityHint, so that it announces when focusing the field.
https://appt.org/en/docs/react-native/samples/accessibility-hint

Environment(s)

Samsung Galaxy S24 Ultra - Android 14, Partner - Native (No mobile browser)

Screenshots/Videos

Bug7005004_1763269511969.The_displayed_error_message_is_not_associated_with_the_input_field__2_.mp4

Version Number: Production
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
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/7005004
Issue reported by: NA
Slack conversation: NA

[melvin-bot]

📣 @elisenwazuoke! 📣
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!

[melvin-bot]

📣 @mccoychang! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

⚠️ Invalid email. Please make sure to create an Expensify account with this email first here.

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!