Polaris-react: [a11y] [Banners] In card and modal banners low contrast against page background

[sarahill]

Banner in card / modal

Related to #1393 and #1303

In context banners are used to display non-critical info within the content of the page without detracting from the merchant's goal.

Problem

These banners have low contrast against backgrounds and rely on color to convey status.

• Colour shouldn’t be the only thing that portrays meaning in our banners, the icon helps but we could also have some text
• We need to look into a new way to make the banner in card more perceivable the current background provides no value as the contrast is too low and the spacing is the only thing making it appear different to the content.

Examples

Current implementation

Previous explorations

[sarahill]

@dpersing Do you have any thoughts on this?

[dpersing]

I wouldn't say that we rely on color to convey on status, since we do also use icons and and text. Using color is totally cool, it just can't be the _only_ way we convey information. But, I totally agree that we could make banners stand out more, since as you mention the spacing and colors are very subtle.

Off the top of my head things:

• We could make the icon bigger
• We could make the banner border more pronounced (which would also mean we would need to look at its focus state as well, which currently uses a solid all-around border)
• We could bump up the heading font size

We should also keep in mind the explorations around stacking multiple banners (https://github.com/Shopify/polaris-ux/issues/218).

This might be a good Frideation topic to collaborate on? @sarahill

[sarahill]

I wouldn't say that we rely on color to convey status since we do also use icons and text.

☝️ That's true. I don't love how much the banner blends into the page background but it may be a lower priority.

Frideations would be a great way to dig into this more! Happy to pair with you on it.

[dpersing]

While @sarahill and I poked around admin looking at banner examples, we also found some non-banner items that probably should be banners. We'll catalog them here to take their use into account as well.

A non-banner case where I feel like a banner would be appropriate, on the product page:

[sarahill]

Link to explorations https://shopify.invisionapp.com/share/H5RYQ3JVN3G#/362744229_In_Context_Banner_Grouped

Devon and I explored some options to make these banners pop a bit more against the page or card background. We added a 1px top border to carry over the style from the page banners and help these standout.

---

Exploration with a white halo for icon contrast against the banner bg.

---

---

This takes the concept a bit further and incorporates the multi-banner handling designs that Amanda and Patrick worked on.

[shutingc]

Do we know when this will be shipped roughly?

[dpersing]

Hi @shutingc! We don't yet have a timeline for shipping this.