From 92f53ce9fbf664fc31543feeed56bfa4abb1dd4f Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 27 Aug 2018 18:56:51 +0200 Subject: [PATCH] fix(live-announcer): avoid triggering a reflow when reading directive content (#12638) Uses `textContent`, instead of `innerText`, to avoid triggering a reflow when reading off the content of the directive element. --- src/cdk/a11y/live-announcer/live-announcer.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/cdk/a11y/live-announcer/live-announcer.ts b/src/cdk/a11y/live-announcer/live-announcer.ts index ff75f2639e04..4299273819ff 100644 --- a/src/cdk/a11y/live-announcer/live-announcer.ts +++ b/src/cdk/a11y/live-announcer/live-announcer.ts @@ -118,10 +118,15 @@ export class CdkAriaLive implements OnDestroy { this._subscription = null; } } else if (!this._subscription) { - this._subscription = this._ngZone.runOutsideAngular( - () => this._contentObserver.observe(this._elementRef).subscribe( - () => this._liveAnnouncer.announce( - this._elementRef.nativeElement.innerText, this._politeness))); + this._subscription = this._ngZone.runOutsideAngular(() => { + return this._contentObserver + .observe(this._elementRef) + .subscribe(() => { + // Note that we use textContent here, rather than innerText, in order to avoid a reflow. + const element = this._elementRef.nativeElement; + this._liveAnnouncer.announce(element.textContent, this._politeness); + }); + }); } } private _politeness: AriaLivePoliteness = 'off';