diff --git a/src/app/components/dynamicdialog/dynamicdialog.ts b/src/app/components/dynamicdialog/dynamicdialog.ts index a380d84ad2d..94308124521 100755 --- a/src/app/components/dynamicdialog/dynamicdialog.ts +++ b/src/app/components/dynamicdialog/dynamicdialog.ts @@ -67,12 +67,12 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{ *ngIf="visible" [style.width]="config.width" [style.height]="config.height" - [attr.aria-labelledby]="getAriaLabelledBy()" + [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-modal]="true" >
- {{ config.header }} + {{ config.header }}
`, animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], - changeDetection: ChangeDetectionStrategy.OnPush, + changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, styleUrls: ['../dialog/dialog.css'], host: { @@ -122,6 +122,8 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy { lastPageY: number | undefined; + ariaLabelledBy: string | undefined; + @ViewChild(DynamicDialogContent) insertionPoint: Nullable; @ViewChild('mask') maskViewChild: Nullable; @@ -217,6 +219,7 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy { ngAfterViewInit() { this.loadChildComponent(this.childComponentType!); + this.ariaLabelledBy = this.getAriaLabelledBy(); this.cd.detectChanges(); } @@ -358,10 +361,10 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy { }); return; - } + } const focusableElements = DomHandler.getFocusableElements(this.container); - if(focusableElements && focusableElements.length > 0) { + if (focusableElements && focusableElements.length > 0) { this.zone.runOutsideAngular(() => { setTimeout(() => focusableElements[0].focus(), 5); });