Newer Version Available

This content describes an older version of this product. View Latest

Audio Messages

To convey audio notifications, create a toast using lightning:notificationsLibrary. The toast is rendered with role="alert", which enables screen readers to announce the text inside the toast without any additional action by the user.

If you’re creating your own feedback mechanism and work with multiple toasts, consider using role="status" to persist the toast in the queue. This role reduces the risk of a user missing a toast message. Contrastingly, role="alert" overrides previous toasts in the screen reader’s speech queue. For more information, see the toast accessibility guideline.

1<lightning:notificationsLibrary aura:id="notifLib"/>
2<lightning:button name="toast" label="Show Toast" onclick="{!c.handleShowToast}"/>
1({
2    handleShowToast : function(component, event, helper) {
3        component.find('notifLib').showToast({
4            "title": "Success!",
5            "message": "The record has been updated successfully."
6        });
7    }
8})

Alternatively, create a prompt notice to alert a user of system-related issues or updates. The notice is rendered as a modal dialog with role="dialog", and must be dismissed before you can return to the rest of the page.

1<lightning:notificationsLibrary aura:id="notifLib"/>
2<lightning:button name="notice" label="Show Notice" onclick="{!c.handleShowNotice}"/>
1({
2    handleShowNotice : function(component, event, helper) {
3        component.find('notifLib').showNotice({
4            "variant": "error",
5            "header": "Something has gone wrong!",
6            "message": "Unfortunately, there was a problem updating the record.",
7            closeCallback: function() {
8                alert('You closed the alert!');
9            }
10        });
11    }
12})

lightning:notificationsLibrary implements the prompt and toast blueprint in the Salesforce Lightning Design System and follows its accessibility guidelines.