From 3b3e391acebea33e1942f81aaadcc17cdf8cead3 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Thu, 21 Aug 2025 18:02:28 +0000
Subject: [PATCH] docs(multiple): adds live announcer to improve layout button
 toggles

Updates buttons in the header of the dev-app layout and improves
accessibility by adding live announcer to announce the action
that was triggered.

Fixes b/435507181
---
 src/dev-app/dev-app/dev-app-layout.ts | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
index dcd3d2f2f2b8..48b525e92a5b 100644
--- a/src/dev-app/dev-app/dev-app-layout.ts
+++ b/src/dev-app/dev-app/dev-app-layout.ts
@@ -7,6 +7,7 @@
  */
 
 import {Direction, Directionality} from '@angular/cdk/bidi';
+import {LiveAnnouncer} from '@angular/cdk/a11y';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -56,6 +57,7 @@ export class DevAppLayout {
   private _document = inject(DOCUMENT);
   private _iconRegistry = inject(MatIconRegistry);
   private _route = inject(ActivatedRoute);
+  private _liveAnnouncer = inject(LiveAnnouncer);
 
   state = getAppState();
   testMode: Observable<boolean>;
@@ -161,33 +163,43 @@ export class DevAppLayout {
     this.state.darkTheme = value;
     this._document.body.classList.toggle('demo-unicorn-dark-theme', value);
     setAppState(this.state);
+    this._liveAnnouncer.announce(value ? 'Dark theme enabled.' : 'Light theme enabled.');
   }
 
   toggleSystemTheme(value = !this.state.systemTheme) {
     this.state.systemTheme = value;
     this._document.body.classList.toggle('demo-experimental-theme', value);
     setAppState(this.state);
+    this._liveAnnouncer.announce(value ? 'System theme enabled.' : 'Standard theme enabled.');
   }
 
   toggleFullscreen() {
     this._element.nativeElement.querySelector('.demo-content')?.requestFullscreen();
+    this._liveAnnouncer.announce('Fullscreen toggled.');
   }
 
   toggleStrongFocus(value = !this.state.strongFocusEnabled) {
     this.state.strongFocusEnabled = value;
     this._document.body.classList.toggle('demo-strong-focus', value);
     setAppState(this.state);
+    this._liveAnnouncer.announce(value ? 'Strong focus enabled.' : 'Strong focus disabled.');
   }
 
-  toggleZoneless(value = !this.isZoneless) {
+  async toggleZoneless(value = !this.isZoneless) {
     this.state.zoneless = value;
     setAppState(this.state);
+    const message = value ? 'Zoneless enabled, reloading.' : 'Zoned enabled, reloading.';
+    await this._liveAnnouncer.announce(message);
     location.reload();
   }
 
-  toggleAnimations() {
+  async toggleAnimations() {
     this.state.animations = !this.state.animations;
     setAppState(this.state);
+    const message = this.state.animations
+      ? 'Animations enabled, reloading.'
+      : 'Animations disabled, reloading.';
+    await this._liveAnnouncer.announce(message);
     location.reload();
   }
 
@@ -198,6 +210,7 @@ export class DevAppLayout {
 
     this.state.density = this._densityScales[index];
     setAppState(this.state);
+    this._liveAnnouncer.announce(`Density set to ${this.state.density}`);
 
     // Keep the tooltip open so we can see what the density was changed to. Ideally we'd
     // always show the density in a badge, but the M2 badge is too large for the toolbar.
@@ -209,6 +222,7 @@ export class DevAppLayout {
   toggleRippleDisabled(value = !this.state.rippleDisabled) {
     this._rippleOptions.disabled = this.state.rippleDisabled = value;
     setAppState(this.state);
+    this._liveAnnouncer.announce(value ? 'Ripples disabled.' : 'Ripples enabled.');
   }
 
   toggleDirection(value: Direction = this.state.direction === 'ltr' ? 'rtl' : 'ltr') {
@@ -216,6 +230,9 @@ export class DevAppLayout {
       this._dir.value = this.state.direction = value;
       this._changeDetectorRef.markForCheck();
       setAppState(this.state);
+      this._liveAnnouncer.announce(
+        value === 'ltr' ? 'Direction set to LTR.' : 'Direction set to RTL.',
+      );
     }
   }
 
@@ -232,12 +249,16 @@ export class DevAppLayout {
     );
     this.state.m3Enabled = value;
     setAppState(this.state);
+    this._liveAnnouncer.announce(value ? 'Using M3 theme.' : 'Using M2 theme.');
   }
 
   toggleColorApiBackCompat(value = !this.state.colorApiBackCompat) {
     this.state.colorApiBackCompat = value;
     this._document.body.classList.toggle('demo-color-api-back-compat', value);
     setAppState(this.state);
+    this._liveAnnouncer.announce(
+      value ? 'Color API back-compatibility enabled.' : 'Color API back-compatibility disabled.',
+    );
   }
 
   getDensityClass() {