[Password page] "Shopify" logo link opens in a new window without warning

[svinkle]

Issue summary

The "Shopify" logo link opens a new window without warning the user. This could confuse screen reader users or cognitive impaired users who, when discover and interact with the link, believe they are following a link in the same browser window. This also causes extra work for sighted, keyboard-only users to switch back to the previous tab or window.

Screenshots

Current code

HTML

<a
  class="shopify-link"
  href="//www.shopify.com"
  rel="nofollow"
  target="_blank"
  …
>
  <!-- SVG… -->
</a>

Steps to reproduce

1. Go to a Dawn theme store with a password enabled with any supported browser
2. Navigate to the /password page
3. With an active screen reader, navigate to the Shopify image link in the footer

Behavior

Expected

• Links which open a new window will be accompanied by a visual and aural warning.

Actual

• Link opens a new window without warning.

Recommendation

1. Add a new hidden element to the DOM which includes the warning text.
2. Add the aria-describedby attribute to the link, setting its value to the id of the warning text container, providing an audible warning.

Recommended code

HTML

<div hidden id="warning-text">Opens in a new window.</div>

<!-- … -->

<a
  class="shopify-link"
  href="//www.shopify.com"
  rel="nofollow"
  target="_blank"
  …
  aria-describedby="warning-text"
>
  <!-- SVG… -->
</a>

Specifications

• Browser: Any
• Dawn version: 2.2.0
• Component: Password page
• WCAG Principal: Understandable
• WCAG SC: 3.2.2 On Input
• Severity: Medium
• Effort: Low
• Related: [Password page] Shopify image link issues #770