https://www.usgs.gov/themes/contrib/uswds_base/js/messages.js?tm7wy6

1/**
2 * @file
3 * Message template overrides.
4 */
5
6((Drupal) => {
7  /**
8   * Overrides message theme function.
9   *
10   * @param {object} message
11   *   The message object.
12   * @param {string} message.text
13   *   The message text.
14   * @param {object} options
15   *   The message context.
16   * @param {string} options.type
17   *   The message type.
18   * @param {string} options.id
19   *   ID of the message, for reference.
20   *
21   * @return {HTMLElement}
22   *   A DOM Node.
23   */
24  Drupal.theme.message = ({ text }, { type, id }) => {
25    const messagesTypes = Drupal.Message.getMessageTypeLabels();
26    const messageWrapper = document.createElement('div');
27
28    messageWrapper.setAttribute(
29      'class',
30      `messages usa-alert usa-alert--${type === 'status' ? 'success' : type} messages--${type} messages-list__item`,
31
32    );
33    messageWrapper.setAttribute(
34      'role',
35      type === 'error' || type === 'warning' ? 'alert' : 'status',
36    );
37    messageWrapper.setAttribute('aria-labelledby', `${id}-title`);
38    messageWrapper.setAttribute('data-drupal-message-id', id);
39    messageWrapper.setAttribute('data-drupal-message-type', type);
40
41    messageWrapper.innerHTML = `
42    <div class="messages__container usa-alert__body" data-drupal-selector="messages-container">
43      <div class="messages__header">
44        <h2 id="${id}-title" class="visually-hidden messages__title">${messagesTypes[type]}</h2>
45      </div>
46      <div class="messages__content usa-alert__text">
47        ${text}
48      </div>
49    </div>
50  `;
51
52    return messageWrapper;
53  };
54})(Drupal);