Status 1.1
This can be used to show global status messages.
Basic functionality
Statuses can be shown globally or in a specific element, optionally with "success" or "error" classes applied.
The default behaviour is to look for an element with the class js-status, and use that to display all statuses. Optionally, a selector or specific Element can be specified to be used instead.
Recommended default styles can be found in status.scss. The important styles to keep are the animations, particularly the becomeVisible and becomeHidden animations, which are used alongside animation-fill-mode: forwards; to hide and show the element. Typically, a global status element will keep position: fixed; too.
Accessibility
Status elements should have a role="alert" attribute, which will cause them to be read out by screen readers. See the Alert section on the WAI-ARIA Authoring Practices page for more information.
In order to meet WCAG 2.0 success criterion 2.2.3 - No Timing, alerts should not disappear automatically where it can be avoided.
However, there are some cases where making an alert remain visible indefinitely can cause larger issues, such as an alert telling the user that their changes have been saved automatically. In these cases, an autohide delay argument can be used to specify the time (in milliseconds) that an alert should remain visible. For example:
Methods
The $status argument is optional, and can be used to specify a selector or a Node to use to display the message. If it is absent, Status will look for an element with the class js-status.
The autohideDelay argument is also optional, it allows you to specify a time (in milliseconds) after which the message should be hidden automatically.
success(message, $status, autohideDelay)
Show a message with the success class.
error(message, $status, autohideDelay)
Show a message with the error class.
hide($status)
Hide a visible message.
Pubsub events
/status/success calls the success method.
/status/error calls the error method.
/status/hide calls the hide method.