Proposal: Improve Notification colour contrast (a11y) about forma-36 HOT 11 CLOSED

IMO, they look great! It really improves the readability of the notifications 👍

from forma-36.

Great proposal @m10l ✨ I've got couple of comments:

• This definitely makes them more readable!
• There should be some more vertical spacing between the text elements, spacing-2xs (4px) or even xs (8px), to make the message easier to scan and the perceived click area around the CTA larger
• The icon should be horizontally aligned with the Title / Close button. People scan messages in the form of the letter F, but this way the eye pops back left to view the icon after reading the Title. Examples from other systems: Atlassian, Polaris, Carbon
• Can we use the TextLink component for the CTA here? It would make it stand out a bit more and consistent with the rest of the web app.
• Consider text wrapping in the body. The right side of the notification — close button with white background — should have similar spacing as the left side — icon with coloured background, so no text goes below the close button.

Questions

• Where is the CTA when there's no body text? An example might be a "success" message with an Undo
• Could we rename the component to Message or Toast or would that be a breaking change?
• Should we replace the icon in the red error message with the Error Icon to make it different than the icon for the warning message?

Here's a sketch of all the details I mentioned above:

from forma-36.

@domarku Awesome, thanks for the review and suggestions

There should be some more vertical spacing between the text elements, spacing-2xs (4px) or even xs (8px), to make the message easier to scan and the perceived click area around the CTA larger

Cool, I think this is worth tackling at the same time too so will do this as part of the same PR

The icon should be horizontally aligned with the Title / Close button. People scan messages in the form of the letter F, but this way the eye pops back left to view the icon after reading the Title. Examples from other systems: Atlassian, Polaris, Carbon

The examples linked all have a solid background for the entire notification, so I think your suggestion makes sense there, but doesn't work for what we're doing as it's a smaller section with a solid colour background.

Can we use the TextLink component for the CTA here? It would make it stand out a bit more and consistent with the rest of the web app.

Ah good spot, was using TextLink but the wrong colour.

Consider text wrapping in the body. The right side of the notification — close button with white background — should have similar spacing as the left side — icon with coloured background, so no text goes below the close button.

Cool, think text is already prevented from going beneath the close button, but I'll test it to make sure.

Where is the CTA when there's no body text? An example might be a "success" message with an Undo

It's always at the bottom

Could we rename the component to Message or Toast or would that be a breaking change?

That'd be a breaking change, wouldn't recommend it for now

Should we replace the icon in the red error message with the Error Icon to make it different than the icon for the warning message?

Ooo, definitely, good shout.

from forma-36.

Right on @m10l! Thanks for addressing all my comments. Any chance you would consider putting the CTA inline in case of no body text? Like so:

@domarku Still not in favour of doing this, I think introduces more potential problems than it tries to solve.

Pros/cons

• ➕ Everything readable on a single line
• ➖Concerns around truncation - how to handle if the CTA and title are both super long? What if the title spans multiple lines?
• ➖Consistency - I'd argue that moving the CTA based on number of lines of text could create a jarring experience for the user

from forma-36.

@domarku That'd be awesome! Shall I close this an open a PR?

from forma-36.

Do it 🤠

from forma-36.

looks really good! now if you compare the old notification to it, the old one look super outdated and wrong so 100x for the proposal

from forma-36.

I see that Github has the icon vertically centered in their Toast component. Look at others to get inspired not to prove a point! :) But, nevertheless, I still think it should be aligned to the top.

from forma-36.

Right on @m10l! Thanks for addressing all my comments. Any chance you would consider putting the CTA inline in case of no body text? Like so:

from forma-36.

Ah, good points. Although that makes me think we should have come copy guidelines for the notifications. I'll give it a go at writing and adding them to the thread later in the day.

from forma-36.

Closing as PR created here: #449

from forma-36.