<section [ngClass]="className" *ngIf="errors$ | async as errors">
  <ul class="toast-list__list" *ngIf="errors.length">
    <li class="toast-list__item" *ngFor="let error of errors">
      <msfa-toast [error]="error" (closeToast)="removeError($event)"></msfa-toast>
    </li>
  </ul>
  <div class="msfa__a11y-sr-only" [attr.aria-live]="ariaLivePoliteness" [attr.aria-atomic]="ariaAtomic">
    <ng-container *ngIf="errors.length">
      <h3>{{ errors.length }} fel har uppstått!</h3>
      <ul>
        <li *ngFor="let error of errors">{{ error.name }}: {{ error.message }}</li>
      </ul>
    </ng-container>
  </div>
</section>
