diff --git a/.gitignore b/.gitignore
index 250a7c02..83c9fad4 100755
--- a/.gitignore
+++ b/.gitignore
@@ -7,4 +7,4 @@ report/*
.idea
# auto-gen PHP files/logs
-php_errors.log
+php_errors.log
\ No newline at end of file
diff --git a/content/body/toast.php b/content/body/toast.php
new file mode 100644
index 00000000..0896e987
--- /dev/null
+++ b/content/body/toast.php
@@ -0,0 +1,166 @@
+
+ Toast notifications are non-blocking alerts that provide feedback or information to users. They are hidden by default and become visible when triggered by a user action or system event. Toast notifications can be styled, positioned, and customized to suit various needs. This demo showcases an accessible implementation of toast notifications.
+
+
+Shopping Site Toast Notifications Example
+
+
+
+
+
+
+
+Accessible Toast Notifications Example
+
+ true,
+ "comment" => "Recommended for new and existing work.",
+]); ?>
+ true]); ?>
+
+
+ In order to make toast notifications accessible, there are a few considerations:
+
+
+ Toasts should be announced by screen readers when they appear.
+ Keyboard users should be able to navigate to and dismiss toasts.
+ Toasts should support different levels of severity (normal, error, warning, success), each with a unique color for visual distinction.
+
+
+ Our implementation ensures that toasts are fully accessible and follow best practices for ARIA and keyboard interaction.
+ When a toast appears, it is announced to screen readers. Toasts will remain visible until manually dismissed by the user.
+ Additionally, all toasts are stored in a toast rack for future reference.
+
+
+
+
+
+ Toast Message:
+
+
+
+
+
+ Max Visible:
+
+
+ Show Toast
+ Toggle Toast Rack
+
+
+
+
+
Accessible Toast Notifications
+
+ Toast notifications are non-blocking alerts that provide
+ feedback or information to users. They are hidden by default and
+ become visible when triggered by a user action or system
+ event.
+ Toast notifications can be styled, positioned, and customized to
+ suit various needs. This demo showcases an accessible implementation
+ of toast notifications.
+
+
+ Accessible Toast Notifications Example
+
+
+ In order to make toast notifications accessible, there are a few
+ considerations:
+
+
+
+ Toasts should be announced by screen readers when they appear.
+
+
+ Keyboard users should be able to navigate to and dismiss toasts.
+
+
+ Toasts should support different levels of severity (normal,
+ error, warning, success), each with a unique color for visual
+ distinction.
+
+
+
+ Our implementation ensures that toasts are fully accessible and
+ follow best practices for ARIA and keyboard interaction. When a
+ toast appears, it is announced to screen readers. Toasts can be
+ configured to stay visible for a set amount of time or until
+ manually dismissed by the user. Additionally, all toasts are stored
+ in a toast rack for future reference.
+
+
+
+
+
+ Toast Message:
+
+
+
+
+
+ Max Visible:
+
+
+ Show Toast
+ Toggle Toast Rack
+
+
+
+
+
+ * Part of the Enable accessible component library.
+ * Version 1.x released [Release Date]
+ *
+ * More information about this script available at:
+ * https://www.useragentman.com/enable/toast.php
+ *
+ * Released under the MIT License.
+ ******************************************************************************/
+
+const toastModule = new function() {
+
+ this.init = function() {
+ this.rackContent = document.getElementById('rackContent');
+ this.updateToggleRackButton();
+ };
+
+ this.Toast = class {
+ constructor(options = {}) {
+ this.container = this.createContainer(options.position || 'bottom-right');
+ this.maxVisible = options.maxVisible || 1;
+ this.toastQueue = [];
+ this.visibleQueue = [];
+ this.levels = options.levels || {};
+ this.ariaLive = options.ariaLive || 'polite'; // Default to polite
+ document.body.appendChild(this.container);
+
+ // Initialize the toast rack
+ this.rackContent = document.getElementById('rackContent');
+ this.toggleRackButton = document.getElementById('toggleRackButton');
+ }
+
+ // Create the container for the toasts
+ createContainer(position) {
+ const container = document.createElement('div');
+ container.className = `enable-toast__container enable-toast__container--${position}`;
+ return container;
+ }
+
+ // Show a new toast notification
+ showToast(message, level = 'normal') {
+ const toastData = {
+ message,
+ level,
+ id: Date.now() // unique id for each toast
+ };
+ this.toastQueue.push(toastData);
+ this.visibleQueue.push(toastData);
+ console.log("Toast added to queue and visibleQueue:", toastData);
+ const toastElement = this.createToastElement(toastData);
+ this.container.appendChild(toastElement);
+ toastElement.offsetHeight; // Force reflow to ensure the element is rendered before adding the visible class
+
+ setTimeout(() => {
+ toastElement.classList.add('enable-toast__item--visible');
+ }, 100); // Slight delay to ensure screen readers catch the change
+
+ // Update the toast rack with the new toast
+ this.updateToastRack();
+ this.updateVisibleToasts();
+ this.updateToggleRackButton();
+ }
+
+ // Create the individual toast element (Using enable-toast__item)
+ createToastElement(toastData) {
+ const { message, level, id } = toastData;
+ const toast = document.createElement('div');
+ toast.className = 'enable-toast__item';
+ toast.style.backgroundColor = this.levels[level]?.color || '#333';
+ toast.setAttribute('tabindex', '-1');
+ toast.setAttribute('aria-live', this.ariaLive);
+ toast.setAttribute('role', 'alert');
+ toast.setAttribute('data-id', id);
+
+ const messageSpan = document.createElement('span');
+ messageSpan.textContent = message;
+ toast.appendChild(messageSpan);
+
+ const closeButton = document.createElement('button');
+ closeButton.className = 'enable-toast__close';
+ closeButton.setAttribute('aria-label', 'close alert');
+ closeButton.textContent = '✖';
+ closeButton.addEventListener('click', () => {
+ console.log("Close button clicked for toast:", message);
+ this.dismissToast(toastData);
+ });
+ toast.appendChild(closeButton);
+
+ return toast;
+ }
+
+ // Dismiss a toast notification
+ dismissToast(toastData) {
+ const toastElement = this.container.querySelector(`[data-id="${toastData.id}"]`);
+ if (toastElement) {
+ toastElement.classList.add('enable-toast__item--exit');
+ setTimeout(() => {
+ toastElement.remove();
+ this.visibleQueue = this.visibleQueue.filter(t => t.id !== toastData.id);
+ this.updateVisibleToasts();
+ this.updateToastRack();
+ this.updateToggleRackButton();
+ }, 500); // Match the CSS animation duration
+ }
+ }
+
+ // Update the visible toasts according to the max visible limit
+ updateVisibleToasts() {
+ console.log("Updating visible toasts");
+
+ // Remove excess toasts from the visibleQueue
+ while (this.visibleQueue.length > this.maxVisible) {
+ const toastToRemove = this.visibleQueue.shift();
+ this.dismissToast(toastToRemove);
+ }
+
+ // Ensure only maxVisible toasts are displayed
+ this.visibleQueue.forEach((toast, index) => {
+ const toastElement = this.container.querySelector(`[data-id="${toast.id}"]`);
+ if (index < this.maxVisible) {
+ toastElement.classList.add('enable-toast__item--visible');
+ } else {
+ toastElement.classList.remove('enable-toast__item--visible');
+ }
+ });
+
+ this.updateStatus();
+ }
+
+ // Update the status of the toasts
+ updateStatus() {
+ const totalVisible = this.visibleQueue.length;
+ const totalNotifications = this.toastQueue.length;
+ document.getElementById('status').textContent = `Total Visible: ${totalVisible}, Total Notifications: ${totalNotifications}`;
+ }
+
+ // Update the toast rack
+ updateToastRack() {
+ console.log("Updating toast rack");
+ this.rackContent.innerHTML = '';
+ this.toastQueue.forEach(toastData => {
+ const { message, level, id } = toastData;
+ const toastElement = document.createElement('div');
+ toastElement.className = 'enable-toast__item enable-toast__item--visible';
+ toastElement.style.backgroundColor = this.levels[level]?.color || '#333';
+ toastElement.setAttribute('data-id', id);
+
+ const messageSpan = document.createElement('span');
+ messageSpan.textContent = message;
+ toastElement.appendChild(messageSpan);
+
+ console.log(`Appending toast to rack: ${message}`);
+ this.rackContent.appendChild(toastElement);
+ });
+ const totalNotifications = this.toastQueue.length;
+ console.log(`Toast rack updated with ${totalNotifications} toasts.`);
+ this.rackContent.setAttribute('aria-live', 'assertive');
+ document.getElementById('rackContentStatus').textContent = `Toast rack contains ${totalNotifications} toasts.`;
+ }
+
+ // Update the toggle rack button with the number of toasts
+ updateToggleRackButton() {
+ const totalNotifications = this.toastQueue.length;
+ if (this.toggleRackButton) {
+ this.toggleRackButton.textContent = `Toggle Toast Rack (${totalNotifications})`;
+ }
+ }
+
+ // Clear all toasts
+ clearAllToasts() {
+ this.visibleQueue.forEach(toast => {
+ const toastElement = this.container.querySelector(`[data-id="${toast.id}"]`);
+ if (toastElement) {
+ toastElement.remove();
+ }
+ });
+ this.toastQueue = [];
+ this.visibleQueue = [];
+ console.log("All toasts cleared");
+ this.updateStatus();
+ this.updateToastRack();
+ this.updateToggleRackButton();
+ }
+ }
+};
+
diff --git a/js/modules/toast.js b/js/modules/toast.js
new file mode 100644
index 00000000..fbf32cf8
--- /dev/null
+++ b/js/modules/toast.js
@@ -0,0 +1,192 @@
+'use strict'
+
+/*******************************************************************************
+ * toast.js - UI for Accessible Toast Notifications
+ *
+ * Written by Otto Wachter
+ * Part of the Enable accessible component library.
+ * Version 1.x released [Release Date]
+ *
+ * More information about this script available at:
+ * https://www.useragentman.com/enable/toast.php
+ *
+ * Released under the MIT License.
+ ******************************************************************************/
+
+const toastModule = new function() {
+
+ this.init = function() {
+ this.rackContent = document.getElementById('rackContent');
+ this.updateToggleRackButton();
+ };
+
+ this.Toast = class {
+ constructor(options = {}) {
+ this.container = this.createContainer(options.position || 'bottom-right');
+ this.maxVisible = options.maxVisible || 1;
+ this.toastQueue = [];
+ this.visibleQueue = [];
+ this.levels = options.levels || {};
+ this.ariaLive = options.ariaLive || 'polite'; // Default to polite
+ document.body.appendChild(this.container);
+
+ // Initialize the toast rack
+ this.rackContent = document.getElementById('rackContent');
+ this.toggleRackButton = document.getElementById('toggleRackButton');
+ }
+
+ // Create the container for the toasts
+ createContainer(position) {
+ const container = document.createElement('div');
+ container.className = `enable-toast__container enable-toast__container--${position}`;
+ return container;
+ }
+
+ // Show a new toast notification
+ showToast(message, level = 'normal') {
+ const toastData = {
+ message,
+ level,
+ id: Date.now() // unique id for each toast
+ };
+ this.toastQueue.push(toastData);
+ this.visibleQueue.push(toastData);
+ console.log("Toast added to queue and visibleQueue:", toastData);
+ const toastElement = this.createToastElement(toastData);
+ this.container.appendChild(toastElement);
+ toastElement.offsetHeight; // Force reflow to ensure the element is rendered before adding the visible class
+
+ setTimeout(() => {
+ toastElement.classList.add('enable-toast__item--visible');
+ }, 100); // Slight delay to ensure screen readers catch the change
+
+ // Update the toast rack with the new toast
+ this.updateToastRack();
+ this.updateVisibleToasts();
+ this.updateToggleRackButton();
+ }
+
+ // Create the individual toast element (Using enable-toast__item)
+ createToastElement(toastData) {
+ const { message, level, id } = toastData;
+ const toast = document.createElement('div');
+ toast.className = 'enable-toast__item';
+ toast.style.backgroundColor = this.levels[level]?.color || '#333';
+ toast.setAttribute('tabindex', '-1');
+ toast.setAttribute('aria-live', this.ariaLive);
+ toast.setAttribute('role', 'alert');
+ toast.setAttribute('data-id', id);
+
+ const messageSpan = document.createElement('span');
+ messageSpan.textContent = message;
+ toast.appendChild(messageSpan);
+
+ const closeButton = document.createElement('button');
+ closeButton.className = 'enable-toast__close';
+ closeButton.setAttribute('aria-label', 'close alert');
+ closeButton.textContent = '✖';
+ closeButton.addEventListener('click', () => {
+ console.log("Close button clicked for toast:", message);
+ this.dismissToast(toastData);
+ });
+ toast.appendChild(closeButton);
+
+ return toast;
+ }
+
+ // Dismiss a toast notification
+ dismissToast(toastData) {
+ const toastElement = this.container.querySelector(`[data-id="${toastData.id}"]`);
+ if (toastElement) {
+ toastElement.classList.add('enable-toast__item--exit');
+ setTimeout(() => {
+ toastElement.remove();
+ this.visibleQueue = this.visibleQueue.filter(t => t.id !== toastData.id);
+ this.updateVisibleToasts();
+ this.updateToastRack();
+ this.updateToggleRackButton();
+ }, 500); // Match the CSS animation duration
+ }
+ }
+
+ // Update the visible toasts according to the max visible limit
+ updateVisibleToasts() {
+ console.log("Updating visible toasts");
+
+ // Remove excess toasts from the visibleQueue
+ while (this.visibleQueue.length > this.maxVisible) {
+ const toastToRemove = this.visibleQueue.shift();
+ this.dismissToast(toastToRemove);
+ }
+
+ // Ensure only maxVisible toasts are displayed
+ this.visibleQueue.forEach((toast, index) => {
+ const toastElement = this.container.querySelector(`[data-id="${toast.id}"]`);
+ if (index < this.maxVisible) {
+ toastElement.classList.add('enable-toast__item--visible');
+ } else {
+ toastElement.classList.remove('enable-toast__item--visible');
+ }
+ });
+
+ this.updateStatus();
+ }
+
+ // Update the status of the toasts
+ updateStatus() {
+ const totalVisible = this.visibleQueue.length;
+ const totalNotifications = this.toastQueue.length;
+ document.getElementById('status').textContent = `Total Visible: ${totalVisible}, Total Notifications: ${totalNotifications}`;
+ }
+
+ // Update the toast rack
+ updateToastRack() {
+ console.log("Updating toast rack");
+ this.rackContent.innerHTML = '';
+ this.toastQueue.forEach(toastData => {
+ const { message, level, id } = toastData;
+ const toastElement = document.createElement('div');
+ toastElement.className = 'enable-toast__item enable-toast__item--visible';
+ toastElement.style.backgroundColor = this.levels[level]?.color || '#333';
+ toastElement.setAttribute('data-id', id);
+
+ const messageSpan = document.createElement('span');
+ messageSpan.textContent = message;
+ toastElement.appendChild(messageSpan);
+
+ console.log(`Appending toast to rack: ${message}`);
+ this.rackContent.appendChild(toastElement);
+ });
+ const totalNotifications = this.toastQueue.length;
+ console.log(`Toast rack updated with ${totalNotifications} toasts.`);
+ this.rackContent.setAttribute('aria-live', 'assertive');
+ document.getElementById('rackContentStatus').textContent = `Toast rack contains ${totalNotifications} toasts.`;
+ }
+
+ // Update the toggle rack button with the number of toasts
+ updateToggleRackButton() {
+ const totalNotifications = this.toastQueue.length;
+ if (this.toggleRackButton) {
+ this.toggleRackButton.textContent = `Toggle Toast Rack (${totalNotifications})`;
+ }
+ }
+
+ // Clear all toasts
+ clearAllToasts() {
+ this.visibleQueue.forEach(toast => {
+ const toastElement = this.container.querySelector(`[data-id="${toast.id}"]`);
+ if (toastElement) {
+ toastElement.remove();
+ }
+ });
+ this.toastQueue = [];
+ this.visibleQueue = [];
+ console.log("All toasts cleared");
+ this.updateStatus();
+ this.updateToastRack();
+ this.updateToggleRackButton();
+ }
+ }
+};
+
+export default toastModule;
diff --git a/js/test/toast-1.js b/js/test/toast-1.js
new file mode 100644
index 00000000..353dec88
--- /dev/null
+++ b/js/test/toast-1.js
@@ -0,0 +1,67 @@
+// __tests__/toast.test.js
+import { Toast } from '../js/modules/toast';
+
+describe('Toast', () => {
+ let toast;
+ let mockContainer;
+
+ beforeEach(() => {
+ document.body.innerHTML =
+ '