library/apps/frontend/src/app/components/toast/toast.component.html

<!--
  @copyright 2026 NHCarrigan
  @license Naomi's Public License
  @author Naomi Carrigan
-->

<div
  class="toast-container"
  role="region"
  aria-label="Notifications"
  aria-live="polite"
  aria-atomic="false"
>
  @for (toast of toastService.toastList(); track toast.id) {
    <div
      class="toast toast-{{ toast.type }}"
      [attr.role]="toast.type === 'error' ? 'alert' : 'status'"
      [attr.aria-live]="toast.type === 'error' ? 'assertive' : 'polite'"
      aria-atomic="true"
    >
      <div class="toast-icon" aria-hidden="true">
        @switch (toast.type) {
          @case ('error') { ❌ }
          @case ('success') { ✅ }
          @case ('info') { ℹ️ }
          @case ('warning') { ⚠️ }
        }
      </div>
      <div class="toast-message">
        <span class="sr-only">{{ getTypeLabel(toast.type) }}:</span>
        {{ toast.message }}
      </div>
      <button
        class="toast-close"
        (click)="toastService.remove(toast.id)"
        [attr.aria-label]="'Dismiss ' + getTypeLabel(toast.type) + ' notification'"
        type="button"
      >×</button>
    </div>
  }
</div>