status-messages.html.twig

{#
/**
 * @file
 * Theme override for status messages.
 *
 * Displays status, error, and warning messages, grouped by type.
 *
 * An invisible heading identifies the messages for assistive technology.
 * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
 * for info.
 *
 * Add an ARIA label to the contentinfo area so that assistive technology
 * user agents will better describe this landmark.
 *
 * Available variables:
 * - message_list: List of messages to be displayed, grouped by type.
 * - status_headings: List of all status types.
 * - attributes: HTML attributes for the element, including:
 *   - class: HTML classes.
 */
#}

{% block messages %}
  <div aria-live="polite" aria-atomic="true" style="position: relative; z-index: 100;">
      <div style="position: absolute; top: 0; right: 0;">
        {% for type, messages in message_list %}
          {%
            set classes = [
            type == 'error' ? 'bg-danger',
            type == 'status' ? 'bg-success',
            type == 'warning' ? 'bg-warning',
            'toast-header text-white',
          ]
          %}
          {% if type == 'status' %}
            {% set type = 'success'|t %}
          {% endif %}
          <div class="toast mr-4 mt-3" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
            <div {{ attributes.addClass(classes)|without('role', 'aria-label') }}>
              <strong class="mr-auto">
                {{ type }}
              </strong>
              <small>{{ 'just now'|t }}</small>
              <button type="button" class="ml-2 mb-1 close text-white" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="toast-body">
              {% if messages|length > 1 %}
                <ul class="messages__list">
                  {% for message in messages %}
                    <li class="messages__item">{{ message }}</li>
                  {% endfor %}
                </ul>
              {% else %}
                {{ messages|first }}
              {% endif %}
            </div>
          </div>
          {% set attributes = attributes.removeClass(classes) %}
        {% endfor %}
      </div>
  </div>
{% endblock messages %}