From e9228dba49f185a2507a677ba069510bead0d807 Mon Sep 17 00:00:00 2001
From: DBowen33 <denis.bowen@utexas.edu>
Date: Wed, 11 Sep 2024 20:59:36 +0000
Subject: [PATCH] fix(matarial/form-field): error text fix

fixed issue where certain screen reader and browser pairings do not recognize mat-error being inserted into
the DOM, changed it to where visibility is changing on the wrapper rather than adding and removing the
hint and error wrappers. the changing of visibility should be recognized by all browser and screen reader
pairings

Fixes #29616
---
 src/material/form-field/form-field.html | 37 ++++++++++-----------
 src/material/form-field/form-field.scss |  8 +++++
 src/material/form-field/form-field.ts   | 43 +++++++++++++++++++++++++
 3 files changed, 68 insertions(+), 20 deletions(-)

diff --git a/src/material/form-field/form-field.html b/src/material/form-field/form-field.html
index 0c62f7ca809f..1d1c7003f5ac 100644
--- a/src/material/form-field/form-field.html
+++ b/src/material/form-field/form-field.html
@@ -99,25 +99,22 @@
   class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
   [class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'"
 >
-  @switch (_getDisplayedMessages()) {
-    @case ('error') {
-      <div
-        class="mat-mdc-form-field-error-wrapper"
-        [@transitionMessages]="_subscriptAnimationState"
-      >
-        <ng-content select="mat-error, [matError]"></ng-content>
-      </div>
-    }
-
-    @case ('hint') {
-      <div class="mat-mdc-form-field-hint-wrapper" [@transitionMessages]="_subscriptAnimationState">
-        @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
+    class="mat-mdc-form-field-error-wrapper mat-mdc-form-field-error-wrapper--hidden"
+    [@transitionMessages]="_subscriptAnimationState"
+  >
+    <ng-content select="mat-error, [matError]"></ng-content>
+  </div>
+    
+  <div 
+    class="mat-mdc-form-field-hint-wrapper mat-mdc-form-field-hint-wrapper--hidden" 
+    [@transitionMessages]="_subscriptAnimationState"
+  >
+    @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>
diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss
index d796ecb06e1a..1d7d8af0667e 100644
--- a/src/material/form-field/form-field.scss
+++ b/src/material/form-field/form-field.scss
@@ -218,3 +218,11 @@ $_icon-prefix-infix-padding: 4px;
 .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
   max-width: calc(100% * 4 / 3 + 1px);
 }
+
+.mat-mdc-form-field-error-wrapper--hidden {
+  visibility: hidden;
+}
+
+.mat-mdc-form-field-hint-wrapper--hidden {
+  visibility: hidden;
+}
diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts
index 00ae130f1399..3b122b2d303d 100644
--- a/src/material/form-field/form-field.ts
+++ b/src/material/form-field/form-field.ts
@@ -437,6 +437,7 @@ export class MatFormField
     this._stateChanges = control.stateChanges.subscribe(() => {
       this._updateFocusState();
       this._syncDescribedByIds();
+      this._showOrHideSubscript();
       this._changeDetectorRef.markForCheck();
     });
 
@@ -478,17 +479,20 @@ export class MatFormField
     // Re-validate when the number of hints changes.
     this._hintChildren.changes.subscribe(() => {
       this._processHints();
+      this._showOrHideSubscript();
       this._changeDetectorRef.markForCheck();
     });
 
     // Update the aria-described by when the number of errors changes.
     this._errorChildren.changes.subscribe(() => {
       this._syncDescribedByIds();
+      this._showOrHideSubscript();
       this._changeDetectorRef.markForCheck();
     });
 
     // Initial mat-hint validation and subscript describedByIds sync.
     this._validateHints();
+    this._showOrHideSubscript();
     this._syncDescribedByIds();
   }
 
@@ -682,6 +686,45 @@ export class MatFormField
     }
   }
 
+  /**
+   * Solves https://github.com/angular/components/issues/29616
+   * Issues with certain browser and screen reader pairings not able to announce mat-error
+   * when it's added to the DOM rather than changing the visibility of the hint/error wrappers.
+   * Changing visibility instead of adding the div wrappers works for all browsers and sreen
+   * readers.
+   *
+   * If there is an 'error' or 'hint' message being returned, remove visibility: hidden
+   * style class and show error or hint section of code. If no 'error' or 'hint' messages are
+   * being returned and no error children showing in query list, add visibility: hidden
+   * style class back to error wrapper.
+   */
+  private _showOrHideSubscript() {
+    switch (this._getDisplayedMessages()) {
+      case 'error': {
+        console.log(this._elementRef.nativeElement.children[1].children[0].classList);
+        this._elementRef.nativeElement.children[1].children[0].classList.remove(
+          'mat-mdc-form-field-error-wrapper--hidden',
+        );
+        console.log(this._elementRef.nativeElement.children[1].children[0].classList);
+        break;
+      }
+      case 'hint': {
+        console.log(this._elementRef.nativeElement.children[1].children[1].classList);
+        this._elementRef.nativeElement.children[1].children[1].classList.remove(
+          'mat-mdc-form-field-hint-wrapper--hidden',
+        );
+        console.log(this._elementRef.nativeElement.children[1].children[1].classList);
+        break;
+      }
+    }
+
+    if (!this._errorChildren || this._errorChildren.length === 0 || !this._control.errorState) {
+      this._elementRef.nativeElement.children[1].children[0].classList.add(
+        'mat-mdc-form-field-error-wrapper--hidden',
+      );
+    }
+  }
+
   /**
    * Updates the horizontal offset of the label in the outline appearance. In the outline
    * appearance, the notched-outline and label are not relative to the infix container because