Initial Drupal 11 with DDEV setup

web/core/themes/claro/js/messages.js

@@ -0,0 +1,53 @@
+/**
+ * @file
+ * Message template overrides.
+ */
+
+((Drupal) => {
+  /**
+   * Overrides message theme function.
+   *
+   * @param {object} message
+   *   The message object.
+   * @param {string} message.text
+   *   The message text.
+   * @param {object} options
+   *   The message context.
+   * @param {string} options.type
+   *   The message type.
+   * @param {string} options.id
+   *   ID of the message, for reference.
+   *
+   * @return {HTMLElement}
+   *   A DOM Node.
+   */
+  Drupal.theme.message = ({ text }, { type, id }) => {
+    const messagesTypes = Drupal.Message.getMessageTypeLabels();
+    const messageWrapper = document.createElement('div');
+
+    messageWrapper.setAttribute(
+      'class',
+      `messages messages--${type} messages-list__item`,
+    );
+    messageWrapper.setAttribute(
+      'role',
+      type === 'error' || type === 'warning' ? 'alert' : 'status',
+    );
+    messageWrapper.setAttribute('aria-labelledby', `${id}-title`);
+    messageWrapper.setAttribute('data-drupal-message-id', id);
+    messageWrapper.setAttribute('data-drupal-message-type', type);
+
+    messageWrapper.innerHTML = `
+    <div class="messages__header">
+      <h2 id="${id}-title" class="messages__title">
+        ${messagesTypes[type]}
+      </h2>
+    </div>
+    <div class="messages__content">
+      ${text}
+    </div>
+  `;
+
+    return messageWrapper;
+  };
+})(Drupal);