You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Version Number:
**Reproducible in staging?:**Yes Reproducible in production?: Notes/Photos/Videos: Any additional supporting documentation Issue reported by:
Action Performed:
Prerequisite: the user is logged in.
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:
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?
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
View all open jobs on GitHub
The text was updated successfully, but these errors were encountered: