Adds visually hidden announcements for alerts

js/wysiwyg-styles.js

@@ -0,0 +1,35 @@
+/**
+ * @file JS file for the WYSIWYG styles components.
+ */
+
+(function wysiwygStylesScript(Drupal) {
+  Drupal.behaviors.wysiwygStyles = {
+    attach: function (context) {
+      const wysiwygAlerts = once("allAlerts", ".alert", context);
+
+      function alertMessage(alert, type) {
+        const element = document.createElement("span");
+        element.classList.add("visually-hidden");
+        element.innerHTML = Drupal.t(
+          `Alert: "${type}"`
+        );
+        // Insert the message at the beginning of the alert.
+        alert.insertBefore(element, alert.firstChild);
+      }
+
+      wysiwygAlerts.forEach((alert) => {
+        if (alert.classList.contains("alert-info")) {
+          alertMessage(alert, "information");
+        } else if (alert.classList.contains("alert-danger")) {
+          alertMessage(alert, "danger");
+        } else if (alert.classList.contains("alert-failure")) {
+          alertMessage(alert, "failure");
+        } else if (alert.classList.contains("alert-success")) {
+          alertMessage(alert, "success");
+        } else {
+          alertMessage(alert, "default");
+        }
+      });
+    },
+  };
+})(Drupal);

localgov_base.libraries.yml

@@ -48,6 +48,11 @@ wysiwyg-styles:
   css:
     theme:
       css/components/wysiwyg-styles.css: {}
+  js:
+    js/wysiwyg-styles.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 header:
   css: