docs(cdk/a11y): add example of LiveAnnouncer inside dialog (#27944)

Update the live-announcer demo in the dev-app. Add an example of calling
LiveAnnouncer inside of a Dialog. Create another way to reproduce issues with
using live regions inside an aria-modal (#22733).

(cherry picked from commit 504ff7f)

Author: zarend

src/dev-app/live-announcer/BUILD.bazel

@@ -9,5 +9,6 @@ ng_module(
     deps = [
         "//src/cdk/a11y",
         "//src/material/button",
+        "//src/material/dialog",
     ],
 )

src/dev-app/live-announcer/live-announcer-demo.html

@@ -1,6 +1,28 @@
-<div>
+<p>
   <button
     mat-raised-button
     color="primary"
     (click)="announceText('Hey Google')">Announce Text</button>
-</div>
+</p>
+<p>
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="openDialog()">Open Dialog</button>
+</p>
+
+<ng-template let-data let-dialogRef="dialogRef">
+  <h2>Live Announcer Test Dialog</h2>
+  <p>Test LiveAnnouncer inside an aria modal.</p>
+  <p>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="announceText('Hey Google')">Announce Text</button>
+  </p>
+  <button type="button" cdkFocusInitial
+    mat-button
+    (click)="dialogRef.close()">
+    Close
+  </button>
+</ng-template>

src/dev-app/live-announcer/live-announcer-demo.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, TemplateRef, ViewChild} from '@angular/core';
 import {A11yModule, LiveAnnouncer} from '@angular/cdk/a11y';
 import {MatButtonModule} from '@angular/material/button';
+import {MatDialog} from '@angular/material/dialog';
 
 @Component({
   selector: 'toolbar-demo',
@@ -17,9 +18,17 @@ import {MatButtonModule} from '@angular/material/button';
   imports: [A11yModule, MatButtonModule],
 })
 export class LiveAnnouncerDemo {
-  constructor(private _liveAnnouncer: LiveAnnouncer) {}
+  constructor(
+    private _liveAnnouncer: LiveAnnouncer,
+    public dialog: MatDialog,
+  ) {}
 
   announceText(message: string) {
     this._liveAnnouncer.announce(message);
   }
+
+  @ViewChild(TemplateRef) template: TemplateRef<any>;
+  openDialog() {
+    this.dialog.open(this.template);
+  }
 }