Merge pull request primefaces#13644 from SoyDiego/possible-fix-dialog…

…-error dialog: Possible fix ExpressionChangedAfterItHasBeenCheckedError with attr.aria-labelledby
ashikjs · Sep 30, 2023 · 4dda67c · 4dda67c
2 parents 58a8169 + c09848b
commit 4dda67c
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts
@@ -19,6 +19,7 @@ import {
     PLATFORM_ID,
     QueryList,
     Renderer2,
+    SimpleChanges,
     TemplateRef,
     ViewChild,
     ViewEncapsulation,
@@ -73,13 +74,13 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
                 (@animation.start)="onAnimationStart($event)"
                 (@animation.done)="onAnimationEnd($event)"
                 role="dialog"
-                [attr.aria-labelledby]="getAriaLabelledBy()"
+                [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.aria-modal]="true"
             >
                 <div *ngIf="resizable" class="p-resizable-handle" style="z-index: 90;" (mousedown)="initResize($event)"></div>
                 <div #titlebar class="p-dialog-header" (mousedown)="initDrag($event)" *ngIf="showHeader">
-                    <span [id]="getAriaLabelledBy()" class="p-dialog-title" *ngIf="!headerFacet && !headerTemplate">{{ header }}</span>
-                    <span [id]="getAriaLabelledBy()" class="p-dialog-title" *ngIf="headerFacet">
+                    <span [id]="ariaLabelledBy + '_title'" class="p-dialog-title" *ngIf="!headerFacet && !headerTemplate">{{ header }}</span>
+                    <span [id]="ariaLabelledBy + '_title'" class="p-dialog-title" *ngIf="headerFacet">
                         <ng-content select="p-header"></ng-content>
                     </span>
                     <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
@@ -464,6 +465,8 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
 
     dragging: boolean | undefined;
 
+    ariaLabelledBy: string | undefined;
+
     documentDragListener: VoidListener;
 
     documentDragEndListener: VoidListener;
@@ -554,6 +557,12 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
         }
     }
 
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.header) {
+            this.ariaLabelledBy = this.getAriaLabelledBy();
+        }
+    }
+
     getAriaLabelledBy() {
         return this.header !== null ? UniqueComponentId() + '_header' : null;
     }