Use single wrapper with aria-live

Author: adolgachev

src/material/form-field/form-field.html

@@ -101,24 +101,23 @@
 >
   @let subscriptMessageType = _getSubscriptMessageType();
 
-  <div aria-atomic="true" aria-live="polite">
-    @if (subscriptMessageType === 'error') {
-    <div class="mat-mdc-form-field-error-wrapper">
-      <ng-content select="mat-error, [matError]"></ng-content>
-    </div>
-    }
-  </div>
+  <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') {
+        <ng-content select="mat-error, [matError]"></ng-content>
+      }
 
-  <div aria-atomic="true" aria-live="polite">
-    @if (subscriptMessageType === '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>
+      @case ('hint') {
+        @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>