From 73f1b5ab4c590c9441f68839228f90145d0b120a Mon Sep 17 00:00:00 2001
From: mhdsbq <mhdsbk2@gmail.com>
Date: Sat, 23 Aug 2025 22:37:46 +0530
Subject: [PATCH] fix(material/form-field): restore error message animation

When a form becomes invalid and displays an error, the error message was no longer animating. This regression was introduced in #30678 (accessibility changes), because error elements were no longer destroyed/re-rendered, preventing the CSS animation from running.

This fix ensures that the animation works again without impacting accessibility.

Fixes #31712
---
 src/material/form-field/form-field.html | 30 ++++++++++---------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/material/form-field/form-field.html b/src/material/form-field/form-field.html
index 2697be0d764c..b5e38afad4fb 100644
--- a/src/material/form-field/form-field.html
+++ b/src/material/form-field/form-field.html
@@ -95,34 +95,28 @@
   }
 </div>
 
-<div
-    class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
-    [class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'"
+<div aria-atomic="true" aria-live="polite"
+  class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
+  [class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'"
 >
   @let subscriptMessageType = _getSubscriptMessageType();
 
-  <!-- 
-    Use a single permanent wrapper for both hints and errors so aria-live works correctly,
-    as having it appear post render will not consistently work. We also do not want to add
-    additional divs as it causes styling regressions.
-    -->
-  <div aria-atomic="true" aria-live="polite" 
-      [class.mat-mdc-form-field-error-wrapper]="subscriptMessageType === 'error'"
-      [class.mat-mdc-form-field-hint-wrapper]="subscriptMessageType === 'hint'"
-    >
-    @switch (subscriptMessageType) {
-      @case ('error') {
+  @switch (subscriptMessageType) {
+    @case ('error') {
+      <div class="mat-mdc-form-field-error-wrapper">
         <ng-content select="mat-error, [matError]"></ng-content>
-      }
+      </div>
+    }
 
-      @case ('hint') {
+    @case ('hint') {
+      <div class="mat-mdc-form-field-hint-wrapper">
         @if (hintLabel) {
           <mat-hint [id]="_hintLabelId">{{hintLabel}}</mat-hint>
         }
         <ng-content select="mat-hint:not([align='end'])"></ng-content>
         <div class="mat-mdc-form-field-hint-spacer"></div>
         <ng-content select="mat-hint[align='end']"></ng-content>
-      }
+      </div>
     }
-  </div>
+  }
 </div>