toast | messages aria attributes updated

primefaces · Dec 1, 2023 · c4761b6 · c4761b6 · vercel · Dec 1, 2023
1 parent d45661a
commit c4761b6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/app/components/messages/messages.ts b/src/app/components/messages/messages.ts
@@ -2,6 +2,7 @@ import { animate, style, transition, trigger } from '@angular/animations';
 import { CommonModule } from '@angular/common';
 import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, OnDestroy, Optional, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { Message, MessageService, PrimeTemplate } from 'primeng/api';
+import { PrimeNGConfig } from 'primeng/api';
 import { CheckIcon } from 'primeng/icons/check';
 import { ExclamationTriangleIcon } from 'primeng/icons/exclamationtriangle';
 import { InfoCircleIcon } from 'primeng/icons/infocircle';
@@ -42,7 +43,7 @@ import { Subscription, timer } from 'rxjs';
                             <span *ngIf="msg.summary" class="p-message-summary" [attr.data-pc-section]="'summary'">{{ msg.summary }}</span>
                             <span *ngIf="msg.detail" class="p-message-detail" [attr.data-pc-section]="'detail'">{{ msg.detail }}</span>
                         </ng-template>
-                        <button class="p-message-close p-link" (click)="removeMessage(i)" *ngIf="closable" type="button" pRipple [attr.aria-label]="'Close'" [attr.data-pc-section]="'closebutton'">
+                        <button class="p-message-close p-link" (click)="removeMessage(i)" *ngIf="closable" type="button" pRipple [attr.aria-label]="closeAriaLabel" [attr.data-pc-section]="'closebutton'">
                             <TimesIcon [styleClass]="'p-message-close-icon'" [attr.data-pc-section]="'closeicon'" />
                         </button>
                     </div>
@@ -143,7 +144,7 @@ export class Messages implements AfterContentInit, OnDestroy {
 
     contentTemplate: TemplateRef<any> | undefined;
 
-    constructor(@Optional() public messageService: MessageService, public el: ElementRef, public cd: ChangeDetectorRef) {}
+    constructor(@Optional() public messageService: MessageService, public el: ElementRef, public cd: ChangeDetectorRef, private config: PrimeNGConfig) {}
 
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
@@ -229,6 +230,9 @@ export class Messages implements AfterContentInit, OnDestroy {
 
         return null;
     }
+    get closeAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.close : undefined;
+    }
 
     ngOnDestroy() {
         if (this.messageSubscription) {

diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts
@@ -74,7 +74,7 @@ import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast
                     (keydown.enter)="onCloseIconClick($event)"
                     *ngIf="message?.closable !== false"
                     pRipple
-                    [attr.aria-label]="'Close'"
+                    [attr.aria-label]="closeAriaLabel"
                     [attr.data-pc-section]="'closebutton'"
                 >
                     <span *ngIf="message.closeIcon" [class]="'pt-1 text-base p-toast-message-icon pi ' + message.closeIcon"></span>
@@ -140,7 +140,7 @@ export class ToastItem implements AfterViewInit, OnDestroy {
 
     timeout: any;
 
-    constructor(private zone: NgZone) {}
+    constructor(private zone: NgZone,private config: PrimeNGConfig) {}
 
     ngAfterViewInit() {
         this.initTimeout();
@@ -185,9 +185,15 @@ export class ToastItem implements AfterViewInit, OnDestroy {
         event.preventDefault();
     }
 
+    get closeAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.close : undefined;
+    }
+
     ngOnDestroy() {
         this.clearTimeout();
     }
+
+
 }
 
 /**