From 209beabab983fbe1355c68b0c09173048ccbf7ed Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Fri, 13 Oct 2023 23:28:02 +0000
Subject: [PATCH] docs(cdk/a11y): add example of LiveAnnouncer inside dialog

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).
---
 src/dev-app/live-announcer/BUILD.bazel        |  1 +
 .../live-announcer/live-announcer-demo.html   | 26 +++++++++++++++++--
 .../live-announcer/live-announcer-demo.ts     | 13 ++++++++--
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/dev-app/live-announcer/BUILD.bazel b/src/dev-app/live-announcer/BUILD.bazel
index b7b1420f0082..50ddd7322ad3 100644
--- a/src/dev-app/live-announcer/BUILD.bazel
+++ b/src/dev-app/live-announcer/BUILD.bazel
@@ -9,5 +9,6 @@ ng_module(
     deps = [
         "//src/cdk/a11y",
         "//src/material/button",
+        "//src/material/dialog",
     ],
 )
diff --git a/src/dev-app/live-announcer/live-announcer-demo.html b/src/dev-app/live-announcer/live-announcer-demo.html
index 7e7fb39b0aed..ce4533f59420 100644
--- a/src/dev-app/live-announcer/live-announcer-demo.html
+++ b/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>
diff --git a/src/dev-app/live-announcer/live-announcer-demo.ts b/src/dev-app/live-announcer/live-announcer-demo.ts
index 6e46f456159b..548b7e93a7e4 100644
--- a/src/dev-app/live-announcer/live-announcer-demo.ts
+++ b/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);
+  }
 }