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

[low] JAWS+Chrome: About: Links not announced as opening in a new tab/page #5653

Closed
ogumen opened this issue Oct 5, 2021 · 0 comments
Closed

Comments

@ogumen
Copy link

ogumen commented Oct 5, 2021

Action Performed:

Prerequisite: the user is logged in.

  1. Open JAWS+Chrome, open https://staging.new.expensify.com/
  2. Navigate to Settings > About.
  3. Press Tab key to focus the "View the code" and "Open new jobs" links and listen to how they are announced.

Expected Result:

The "View the code" and "Open new jobs" links have a visible icon indicating that they will open a new tab. The icon should be announced along with link label, e.g.: "View the code, opens a new tab".

Actual Result:

The icon displayed next to the "View the code" and "Open new jobs" links text is not announced. Visually it is clear the link opens a new tab but this information is not conveyed by screen reader.

HTML:
<div tabindex="0" class="css-1dbjc4n r-1loqt21 r-1otgn73 r-13qz1uu" style="border-radius: 0px; flex-direction: row; justify-content: space-between; padding: 12px 20px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-box-pack: justify;"><div class="css-1dbjc4n" style="flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal;"><div class="css-1dbjc4n r-1awozwy r-1777fci" style="height: 40px; width: 40px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="#C6C9CA"><path d="..."></path></svg></div><div class="css-1dbjc4n r-1777fci" style="min-height: 40px;"><div dir="auto" class="css-901oao" style="color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 15px; font-weight: 700; line-height: 20px; margin-left: 12px;">View the code</div></div></div><div class="css-1dbjc4n" style="flex-direction: row; min-height: 40px; -webkit-box-orient: horizontal; -webkit-box-direction: normal;"><div class="css-1dbjc4n r-1awozwy r-1777fci" style="height: 40px; width: 40px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="#C6C9CA"><path d="...z"></path></svg></div></div></div>

Other occurrences:

  1. About -> Same is happening with Android, iOS, and Desktop links.

Workaround:

No workaround

Area issue was found in:

About overlay

Failed WCAG checkpoints

1.1.1

User impact:

The screen reader users are not be aware that the links open a new tab.

Suggested resolution:

Use the aria-label attribute on links to announce that they open a new tab or page (e.g. "View the code, opens a new tab" or similar). See: https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8.html

Platform:

Where is this issue occurring?

  • Web

Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:

Bug5185643_non-text_content_-_external_link_-_about.mp4

Bug5185643_non-text_content_-external_link-_about

View all open jobs on GitHub

@ogumen ogumen added this to the Accessibility Audit milestone Oct 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants