Widget: Alert

Example



Details

Implementing This Widget

Implementing the Alert widget is done when you want to have an accessible message (success, information, or error) that appears as a result of a user action with an optional timeout feature in your site or application.

Prerequisites:

None

To implement the Alert widget:

  • Call deque.createAlert with the following three arguments:
    1. Your message
    2. An array of classes (use 'error', 'success' or 'info' for default styles)
    3. An optional timeout value (the alert will remove itself after X milliseconds, if provided)

Expected Operation and Accessibility Features

When the trigger circumstance or user action is enacted (such as clicking a button), the message displays with the appropriate styling. If the timeout option was implemented and selected, the alert will automatically be removed from view after the specified amount of time has elapsed. The alert is announced when displayed by screen readers, and all content is announced without the need for keyboard interaction.

Validation and Developer Notes

In order to validate this widget, initiate the trigger action (such as clicking an action command button) in the user interface and verify the message appears as desired. Be sure to test each of the class(es) used to validate appropriate styles are displayed, and select and wait for the timeout duration to test removal (if implemented) as necessary.

Notes for the Developer:

If you don't provide a timeout, you'll have to remove them yourself either in response to some user action or some other trigger.

Example Implementation Reference

To view an implementation of this widget, see Alert widget example.