Accessible Expandable Toast Notifications In JavaScript – SnapToast

SnapToast is a lightweight, cross-browser JavaScript library for creating customizable and accessible toast notifications.

Its configurable toast limit allows you to control the maximum number of toasts displayed on the screen at once. This can help maintain a clean and organized user interface on your web app.

Customization extends to the toast messages themselves, including optional toast titles and the choice of pre-defined notification types like “info,” “warning,” “danger,” and “success” to visually differentiate message types.

The plugin’s positioning options enable you to display the toasts in multiple locations, including top-right, top-left, bottom-right, bottom-left, center-top, and center-bottom.

For longer messages, the expandable content functionality includes a “Read more” link that allows users to expand the toast and reveal the full content. This design extends to accessibility, with features like screen reader compatibility and keyboard navigation through ARIA roles and attributes.

How to use it:

1. Load both the JavaScript and CSS files from the SnapToast distribution into your HTML document.

<link rel="stylesheet" href="/dist/css/snaptoast.min.css">
<script src="/dist/js/snaptoast.min.js"></script>

2. To create a new toast notification, initialize SnapToast with the desired parameters:

• message: The content to display in the toast.
• title: Optional. The title of the toast notification.
• mode: The type of toast. ‘info’, ‘warning’, ‘danger’, or ‘success’.
• position: The position of toast. ‘top-right’, ‘top-left’, ‘bottom-right’, ‘bottom-left’, ‘center-top’, or ‘center-bottom’.
• duration: Audo-dismiss the toast notification after this timeout

new SnapToast(message, title = '', mode = 'info', position = 'top-right', duration = 3000);

3. Available configuration options:

SnapToast.configure({
  // The max number of visible toasts
  maxVisibleToasts: 3, 
  // Customize the "Read more" text
  readMoreText: 'Read more',  
  // Customize the "Read less" text
  readLessText: 'Read less'  
});