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]: Chrome+Jaws: Screen reader: Heading level is not provided #9463

Closed
SumitDiyora opened this issue Jun 15, 2022 · 1 comment
Closed

Comments

@SumitDiyora
Copy link

SumitDiyora commented Jun 15, 2022

Action Performed:

  1. Login with the credentials to Expensify App
  2. Click on the green (+) icon located at the bottom of the page.
  3. Select Send Money, and a new dialog will appear
  4. Navigate to "Send Money" text with Screen Reader by using arrow keys
  5. Observe the reading announced by Screen Reader.

Expected Result:

The "Send Money" should be announced as heading with a heading level

Actual Result:

When we navigate to "Send Money" with Screen Reader, it announces Send Money as plain text.

HTML code:
<div class="css-1dbjc4n" style="max-width: 100%;"><div dir="auto" class="css-901oao css-cens5h" style="-webkit-line-clamp: 2; color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 17px; font-weight: 700; text-align: left;">Send money</div></div>

Other occurrences:

Similiar issue repro on PRs #9400 for "Close Account", "Closing your account cannot be undone.", "Default contact method: "
Similiar issue repro on PRs #9348 for "Payment"
Similiar issue repro on PRs #9347 for "Manage Members"
Similiar issue repro on PRs #9472 for "Split"

Workaround:

Yes

Area issue was found in:

Send Money

Failed WCAG checkpoints

1.3.1

User impact:

The screen reader users will find it difficult to understand the page structure.

Suggested resolution:

Mark up the mentioned text using appropriate HTML headings. In addition, use heading levels as per specification such as <h1> should be followed by <h2>, <h3> and so on.

HTML code:
<div class="css-1dbjc4n" style="max-width: 100%;"><h1 dir="auto" class="css-901oao css-cens5h" style="-webkit-line-clamp: 2; color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 17px; font-weight: 700; text-align: left;">Send money</h1></div>

Refer:
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

Platform:

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

**Version Number:v1.1.76-5
**Reproducible in staging?:Yes
**Reproducible in production?:Yes
**Issue reported by:Sumit

no.heading.for.sendmoney.text.mp4
@SumitDiyora SumitDiyora changed the title [High]: Chrome+Jaws: Screen reader: Heading level is not provided [Med]: Chrome+Jaws: Screen reader: Heading level is not provided Jun 15, 2022
@melvin-bot melvin-bot bot added the Monthly KSv2 label Jun 20, 2022
@melvin-bot
Copy link

melvin-bot bot commented Sep 2, 2022

@SumitDiyora, 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

1 participant