Skip to content

Commit 3b525d6

Browse files
committed
fix(live-announcer): avoid triggering a reflow when reading directive content
Uses `textContent`, instead of `innerText`, to avoid triggering a reflow when reading off the content of the directive element.
1 parent 29d5173 commit 3b525d6

File tree

1 file changed

+9
-4
lines changed

1 file changed

+9
-4
lines changed

src/cdk/a11y/live-announcer/live-announcer.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -118,10 +118,15 @@ export class CdkAriaLive implements OnDestroy {
118118
this._subscription = null;
119119
}
120120
} else if (!this._subscription) {
121-
this._subscription = this._ngZone.runOutsideAngular(
122-
() => this._contentObserver.observe(this._elementRef).subscribe(
123-
() => this._liveAnnouncer.announce(
124-
this._elementRef.nativeElement.innerText, this._politeness)));
121+
this._subscription = this._ngZone.runOutsideAngular(() => {
122+
return this._contentObserver
123+
.observe(this._elementRef)
124+
.subscribe(() => {
125+
// Note that we use textContent here, rather than innerText, in order to avoid a reflow.
126+
const element = this._elementRef.nativeElement;
127+
this._liveAnnouncer.announce(element.textContent, this._politeness);
128+
});
129+
});
125130
}
126131
}
127132
private _politeness: AriaLivePoliteness = 'off';

0 commit comments

Comments
 (0)