From 166bee2e1ab8a001ed1d03e5fc50667d6abad6b3 Mon Sep 17 00:00:00 2001
From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com>
Date: Thu, 23 Oct 2025 10:03:13 +0200
Subject: [PATCH] [ACS-10295] Fixed reading invalid input errors on profile
 page by screen reader (#4860)

---
 .../view-profile/view-profile.component.html   | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html
index 66b0c7705..8aa6b4ae4 100644
--- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html
+++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html
@@ -65,8 +65,8 @@
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
           <p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.telephone}}</p>
           <input type="tel" name="Telephone" value="" formControlName="telephone" *ngIf="!generalSectionButtonsToggle"
-            class="app-profile-general-dropdown-input-details app-selected">
-          <mat-error class="app-error-message" *ngIf="profileForm.get('telephone').invalid">
+            class="app-profile-general-dropdown-input-details app-selected" aria-describedby="app-view-profile-phone-error-message">
+          <mat-error class="app-error-message" *ngIf="profileForm.get('telephone').invalid" role="alert" id="app-view-profile-phone-error-message">
             {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
           </mat-error>
         </div>
@@ -75,8 +75,8 @@
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.MOBILE' | translate}}</h4>
           <p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.mobile}}</p>
         <input type="tel" value="" formControlName="mobile" *ngIf="!generalSectionButtonsToggle"
-          class="app-profile-general-dropdown-input-details app-selected">
-        <mat-error class="app-error-message" *ngIf="profileForm.get('mobile').invalid">
+          class="app-profile-general-dropdown-input-details app-selected" aria-describedby="app-view-profile-mobile-error-message">
+        <mat-error class="app-error-message" *ngIf="profileForm.get('mobile').invalid" role="alert" id="app-view-profile-mobile-error-message">
           {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
         </mat-error>
         </div>
@@ -131,8 +131,9 @@
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
           <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.telephone}}</p>
           <input type="tel" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyTelephone"
-            class="app-profile-general-dropdown-input-details app-selected">
-          <mat-error class="app-error-message" *ngIf="profileForm.get('companyTelephone').invalid">
+            class="app-profile-general-dropdown-input-details app-selected" aria-describedby="app-view-profile-company-phone-error-message">
+          <mat-error class="app-error-message" *ngIf="profileForm.get('companyTelephone').invalid" role="alert"
+            id="app-view-profile-company-phone-error-message">
             {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
           </mat-error>
         </div>
@@ -141,8 +142,9 @@
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.EMAIL' | translate}}</h4>
           <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.email}}</p>
           <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyEmail"
-            class="app-profile-general-dropdown-input-details app-selected">
-          <mat-error class="app-error-message" *ngIf="profileForm.get('companyEmail').invalid">
+            class="app-profile-general-dropdown-input-details app-selected" aria-describedby="app-view-profile-company-email-error-message">
+          <mat-error class="app-error-message" *ngIf="profileForm.get('companyEmail').invalid" role="alert"
+            id="app-view-profile-company-email-error-message">
             {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
           </mat-error>
         </div>