Use white icon for target="_blank" links on dark background

[Android63]

At the moment, links on ribbons don't show up due to their dark colour on a dark background. We need to make sure there's always adequate contrast so the icon can be clearly seen.

This screenshot demonstrates the problem:

[Android63]

_elements.links.scss contains the following code that adds the icon to the link:

    &[target="_blank"]:after {
      @include sprite(new-window, true)
      margin-left: 2px;
      position: relative;
      top: -1px;
    }

We need it to vary the sprite area chosen based on the colour of the link.

@cehwitham

[Android63]

Maybe use difference blend mode...?

[cehwitham]

Blend mode doesn't have our required browser support.

@Android63 please can you link to the WP theme issue that this relates to?

Might also help to include the HTML as it's not in the demo page for Nightingale.

[Android63]

The original ribbons issue is closed, it's at https://github.com/NHSLeadership/nightingale-wp/issues/5. New issue is at https://github.com/NHSLeadership/nightingale-wp/issues/86

[Android63]

This HTML creates a cookie ribbon:

<div class="c-ribbon" id="jsCookieRibbon">
      <div class="o-wrapper">
        <div class="c-ribbon__actions">
          <button class="c-sprite  c-sprite--close-rev" id="jsCookieBtn">Close</button>
        </div>
        <strong class="c-ribbon__body">By default this site uses <a href="https://www.gov.uk/help/cookies" target="_blank">cookies</a> to collect information and improve. To control cookies, you can <a href="https://www.aboutcookies.org/" target="_blank">adjust your browser settings</a>.</strong>
      </div>
    </div>

[Android63]

Should we be opening links in new tabs/windows? Apparently, this goes against accessibility guidelines. So perhaps we can solve this by simply not doing it. https://www.webcredible.com/blog/beware-opening-links-new-window/

[penpadstudio]

@Android63 what is happening with this issue?