LiveAnnouncer does not work when made inside a mat-dialog

#### Reproduction

Use StackBlitz to reproduce your issue:
https://stackblitz.com/edit/components-issue-fksfhp?file=src/app/dialog-content-example.ts

Steps to reproduce:
1. Open screen reader, I used mac voiceover. Everything below are done via screen reader.
2. Click on the "Open dialog" button to open dialog
3. Inside the dialog, click the "test" button which would make a live announcement.
4. It says "press test, button". No announcement made. If I open the inspector, the `cdk-live-announcer-element` region is correctly populated with the announcement text despite no actual announcement. In addition, if I move this div inside `` it would work but then this element becomes reacheable via screen reader.


#### Expected Behavior

What behavior were you expecting to see?

Make the announcement.

#### Actual Behavior

What behavior did you actually see?

No announcement even though `cdk-live-announcer-element` did get populated.

#### Environment

- Angular: "10.2.4"
- CDK/Material: "10.2.7"
- Browser(s): Chrome Version 90.0.4430.93
- Operating System (e.g. Windows, macOS, Ubuntu): macOS mojave 10.14.6