Experimental Design [Unread dot and Highlighting - Secure Messaging]

[jerobertso]

What

For use in MHV to VA Messages: The proposed component is a text variation that represents an unread message. The text will be bolded and have a blue dot next to it.

Purpose

This allows the use to easily parse through their message lists to identify the unread messages.

Usage

This component is used in the list view of the different folders within Messages

Behavior

There is nothing intractable` with this pattern save that when the message is opened the bolding and blue dot are removed from the list view.

Examples

Sketch Inbox Mock: Mobile | Desktop

Accessibility

The blue dot will have an aria tag that should read "unread message"

Guidance

I am not sure if this pattern is a one off for this specific feature or if needs to be added to the library, but we wanted to present it to the design team for further guidance.

Research (optional)

This pattern has been a part of multiple rounds of usability tests and has done well, although it has not been tested for accessibility.

Code (optional)

N/A

Next steps

Asynchronous review requested.

[jerobertso]

@caw310 tagging you in this issue as well.

[caw310]

@jerobertso , feedback will be added to this ticket.

[humancompanion-usds]

@kfink24 - Did this design make it into MHV?

[kfink24]

@humancompanion-usds yes this did make it into MHV