[Medium] Chrome+JAWS: Many Pages: Error message is not announced by the screen reader. #8579

Action Performed:

1. Using Chrome+JAWS, open URL: staging.new.expensify.com
2. Navigate to Settings > Payments > Add payment method > Debit card.
3. Navigate to the "Save" button and activate it with empty form fields.
4. Observe whether the screen reader is announcing the error messages or not.

Expected Result:

When focus lands on all text boxes the screen reader should read the error messages which are displayed on the screen.

Actual Result:

Screen reader is not read anything after select the save and continue button.

HTML Code:
div dir="auto" class="css-901oao" style="color: rgb(252, 56, 38); font-family: GTAmericaExp-Regular; font-size: 13px; line-height: 18px; margin-bottom: 4px; margin-top: 4px; padding-right: 12px; padding-left: 12px; text-align: left;">Please enter a valid name</div

Note:
Same issue repro on all pages / applications which have form fields.

Other occurrences

Same issue repro on PR #8970, #8970, #9133, #9207, #9369, #9056

Workaround:

Yes

Area issue was found in:

Add a debit card

Failed WCAG checkpoints

3.3.1

User impact:

Error messages or validation messages of forms are pointers that enable users identify the mistakes and rectify them. As a result, error messages should be accurate and descriptive so that users are able to provide correct information and submit the form without any problem.

Suggested resolution:

Add role="alert" attribute within 'div' to ensure that the error message is announced by the screen reader.

Refer to:
https://www.w3.org/TR/WCAG20-TECHS/ARIA19.html

Platform:

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: v1.1.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Sumit