Polaris-react: [a11y] Banner link color and WCAG 2.1 link without underline contrast with text colour

[alex-page]

Issue summary

We have changed the link colour to #006FBB so that it meets a 4.5 colour contrast ratio on all background colours. We changed the link colour so that the darkest background colour would pass, the darkest background is the critical banner #FBEAE5.

Changing the colour to #006FBB also had a negative affect that means we fail WCAG 2.1. Our text colour #212B36 needs to meet a 3.0 contrast on our link colour without links being underlined. It now fails 3.0 contrast does not and requires all links to have underlines.

This is also strongly related to https://github.com/Shopify/polaris-ux/issues/147

Expected behavior

To resolve this, all links in the banner component need to be underlined and monochrome. This will make our links pass contrast on the banner and allow us to slightly increase the lightness making the link colour to #0075C0. This will make sure that the link blue passes on the new darkest background and it meets a 3.0 contrast against the text colour.

Actual behavior

Links are not meeting WCAG 2.1 https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

[dpersing]

all links in the banner component need to be underlined and monochrome

Works for me!

Defining link colors and patterns (a consistent underline, for example) will be crucial in any future color/branding work.

[francinen]

I have time to take this on if there are no objections 🤚

[alex-page]

Hey @francinen that would be great, for this PR I would mainly focus on the link colour in the banner and the text underlines. The actual updating of the link colour to the other blue will happen separately to this work.

[francinen]

👍 Thanks for clarifying

[francinen]

Is this issue referring only to the secondary action? Do we also want to implement this change to the primary action if it is a link?

[alex-page]

I didn't do a good job at explaining:

To resolve this, all links in the banner component need to be underlined and monochrome.

All blue links in the content area should act like the secondaryAction. They should be grey with an underline like in this example where the text to the right of the button uses that appearance:

<Banner
  title="High risk of fraud detected"
  action={{content: 'Review risk analysis'}}
  secondaryAction={{content: 'Review risk analysis'}}
  status="critical"
>
  <p>
    Before fulfilling this order or capturing payment, please{' '}
    <Link url="">review the Risk Analysis</Link> and determine if this order is
    fraudulent.
  </p>
</Banner>

[dpersing]

Closing as this is merged.

[mirualves]

It seems that we only replaced the default link to monochrome link on our banners and left behind the external link. Was that on purpose @alex-page @francinen ?

[mirualves]

Oh, maybe I misunderstood... are the changes on this issue only affecting banners that will be developed after this issue got merged? Does it affect banners that already existed in the back of office (admin)?

[francinen]

@mirualves Hello! The PR that resolved this issue was merged into the version-4.0.0 feature branch, which hasn't been rolled out yet. The new behaviour will be available in Polaris v4.