Keep messages Red, even if mention was removed

[daniellekirkwood]

It's disorienting for users to have a red notification on a room and then to see nothing in the timeline calling their attention... This would happen if the user was mentioned, and then the mention was removed from the timeline message via Edit. In this case, I think the message should stay Red (as it does today)

This is how the message looks when you are mentioned.

This is the suggestion for what the message looks like when the mention is removed but you were originally tagged in it.

We discussed that the all-red messages might be going away soon?
If this is the case, then the "(edit)" should be red, similar to how a keyword would be highlighted in this case.

Originally posted by @daniellekirkwood in #24923 (comment)

---

Design need:

When a user's mentioned by tag or keyword, what should the message look like? Is it all in red, or not?
When the message is edited to remove the ping, then what should the message look like?

If there is no design given before we come to working on this issue then the plan will be to stylise the "(edited)" text in the message to be red so that users can clearly see the reason that they have a red notification is due to the message origianlly pinging them in some way

[daniellekirkwood]

We need a design decision on Direction as this has also been raised: element-hq/element-meta#744

[daniellekirkwood]

Found original designs here: https://www.figma.com/file/M15i7l4PSPY1B5M7Zhu80H/Notifications?node-id=2015-16302&t=YgNcioklUd3vSrYO-0

Could we apply that pill styling to the Edited text?

[clokep]

Maybe also related to #24927 for understanding that you were previously pinged on a message but no longer are.

[rufuskahler]

@daniellekirkwood – I think the styling the "edited" text (to red) could be a smart solution, especially when users can click to see past edits containing the mention or keyword.

CC @janogarcia for guidance on colour system scalability, @amshakal for guidance on related Notifications patterns and @gaelledel for general web guidance.

[janogarcia]

Accessibility-wise, relying exclusively on colour to convey status breaks baseline accessibility criteria (Level A).

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

https://www.w3.org/WAI/WCAG21/quickref/?levels=aaa&showtechniques=141#use-of-color

Design systems (and usability) wise, I think we should not rely on red for mentions and think about an alternative decoration, keeping the semantics of red for critical stuff (error states and feedback, destructive actions, etc.).

Usability-wise, I think we should make the UI smarter and remove the mention state everywhere if the mention no longer exists.

So, I agree that it can be disorienting (symptom), but not on how to tackle it, patching it without addressing none of the underlying core issues/debt.

[rufuskahler]

This makes sense @janogarcia. @daniellekirkwood, if you agree, can we remove the X-Needs-Design label? For prioritisation purposes, I'd also be interested to know what is the occurrence of this issue?

[daniellekirkwood]

I agree with @janogarcia but we need a design to work off. This was suggested as a short term solution as I'm sure the design system will be addressing all of these things but we need something to improve today's experience.

We can remove the mention state but not the notification so the user will receive a red notification and then have no idea why they got it if we don't mention something in the original message that highlighted it.

This issue is the scope of this work for now. We will review this once better designs are available.

Knowing this is the case; We'll move forwards with the Red "Edited" idea (unless y'all want to prep another design?).

On the a11y front, turning it red is not the only way it catches the user's attention as before being edited the edit button would not have been there so I'm not too worried about that at this stage (but yes, an improvement would be needed).

@rufuskahler 👀

[daniellekirkwood]

FYI moved the chat to an internal document here: https://docs.google.com/document/d/1AvHmbGH3XHN6lU-B9xWyMrU0Rv4Ej6DYIsA2ef_9MIs/edit?usp=sharing

[daniellekirkwood]

As per the decision made in comments in this document we'd like to turn the "Edited" button text red.

However, @kerryarchibald already has a build ready to commit. @rufuskahler would you review the images or Netlify in the PR linked above and let us know if you think the solution we have already is enough, or if you'd still like to move ahead with changing "Edited" to red along with message text?

Ideally we'd have an answer to this by the end of Wednesday - is that enough time for you?
If we don't hear back, let's go ahead and commit the PR with the grey text, we can always create another issue to address the text colour change in the future.

[daniellekirkwood]

discussed with @rufuskahler in DMs and we're going to ask that the text is Red.

So when a user was mentioned, then their tag was removed, it would look like this:

this would also apply to keyword tags