Page alert
Page alerts are colour-coded, non-disruptive notifications that provide Success, Error, Warning or Information messages at relevant times during the user journey. They should not be confused with Callouts.
import { ... } from '@ag.ds-next/react/page-alert';To improve accessibility, you may consider using the ARIA alert role (role="alert") in certain situations.
Using role="alert" will immediately interrupt assistive technology to inform users of the alert and for this reason should be used sparingly.
We recommend only using the role="alert" when there is important time-sensitive information that would be detrimental for a user to miss.
More information on ARIA alert role
<PageAlert tone="success" title="Submission successful" role="alert"> <Text as="p">Your application has been successfully submitted.</Text> </PageAlert>
Avoid long messages and ensure alerts stay visible long enough for people with disabilities to read. See WCAG 2.1 success criterion 2.2.3 (AAA) for more detail.
See WCAG 2.1 success criterion 2.2.4 (AAA) for guidance on optional functionality that enables people with visual and cognitive disabilities to control which alerts they see.
Provide alternatives to colour, position, size, shape, and icons to display the alert’s importance.