Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Stutikuls opened this issue Mar 31, 2022 · 1 comment

Comments

@Stutikuls
Copy link

Stutikuls commented Mar 31, 2022

Action Performed:

  1. Using JAWS+ Chrome, open URL staging.new.expensify.com
  2. Navigate to Setting using Tab key and press Enter to select it.
  3. Navigate and select any workspace using Enter & Tab key.
  4. Navigate to the connect bank account using Tab key and press Enter to select it.
  5. Navigate to connect Manually using Tab key and press Enter to select it.
  6. Navigate to Save & Continue button using Tab key and press Enter to select it from Connect Bank Account screen.
  7. Company Information section page is appearing. Not fill any field.
  8. Navigate to Save & Continue button using Tab key and press Enter to activate.
  9. Verify the screen reader announcement.

Expected Result:

When focus lands on all text boxes then 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 class="css-1dbjc4n r-13awgt0 r-1pi2tsx r-12vffkv r-1wyyakw" style="flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal;">
<input autocapitalize="sentences" autocomplete="on" autocorrect="on" dir="auto" spellcheck="true" type="date" class="css-11aywtz r-13awgt0 r-tz77pi r-13qz1uu expensify-datepicker" value="" max="2022-03-31" style="border-radius: 8px; border-width: 0px; box-shadow: none; color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 15px; line-height: 20px; outline-width: 0px; padding: 23px 11px 8px;"

Note
Same issue repro on all pages/ application.

Other Occurrences:
Same issue repro on #8041, #8452, #7362, #8256, #8682, #8730, #8493, #8826, #8868, #8802, #8969, #8845, #8876, #8887
Same issue repro on #9486 for "Phone number" field.
Same issue repro on #9486 for form fields on Add a debit card page.

Workaround:

Yes

Area issue was found in:

Company Information

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 to the

having class="text-input-error" 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.46-2
**Reproducible in staging?:**Yes
**Reproducible in production?:**Yes
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:

1876_Error.message.is.not.announced.by.the.screen.reader.mp4
@melvin-bot
Copy link

melvin-bot bot commented Jun 17, 2022

@Stutikuls, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants