This is an investigation in to alerts and an alert component that builds on the conversations in alphagov/govuk-design-system-backlog#2
After an audit of common alerts used across portfolio products, services and other government product the following behaviours for alerts have been observed
- Alerts respond to an action a user has carried out, like user input
- Alerts require a specific action or set of actions from the user and are not passive
- Alerts are context-specific
- Alerts can be persistent or dismissible
- Alerts should draw focus to it
These behaviours, to some extent, distinguish alerts (for example, error summaries) from banners (notifications)(for example, confirmation panel).
Some use cases mentioned in the backlog could be better served by developing a banner (notification) component. Reasons being that banner notifications aren't necessarily tied to a user's action while an alert should always be.
Speaker to other designers across government, it seems there's more need for a notification component (this need is reflected in the examples presented in the backlog), rather than an alert component.
Adam Silver of MoJ suggests "A Notification component that can be turned into an alert. That is, it becomes focusable for example like the error summary."
Notification components already exists in other design systems
https://moj-design-system.herokuapp.com/components/banner
http://hmcts-design-system.herokuapp.com/components/banner
Alerts and notifications are often used interchangably, so I think it's important to be prescriptive about what alerting behaviour should be (in the Design System) to help determine its presentation and functionality. However, behaviour alone does not a component make and so coupling the alerting behaviour with a notififcation component fits with the expectation of users of design system, while also meeting some articulated needs.
Thanks for feeding into this @adamsilver, much appreciated. The examples you shared match with some of the notifications we use in some our portfolio products (though we don't use logos much).
Are any of these set up as an alert – no further actions can be taken until the cause of the notification is resolved?
From an accessibility pov I've checked out MDN's docs on the aria role for alerts: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role
I think it's useful in helping to further define what an alert is and when one should be used, which helps to define an alert 'modifier' on a notification component.