[ACS-10290] sr personal files my profile page input fields have no associated label (#4871)

* [ACS-10290] Fix association job title field with label

* [ACS-10290] Fixed association between fields and labels on profile page
This commit is contained in:
AleksanderSklorz
2025-10-28 08:33:01 +01:00
committed by GitHub
parent 26416586a7
commit cd330c290d
2 changed files with 85 additions and 18 deletions
@@ -76,25 +76,47 @@
</div>
<mat-divider class="app-general-dropdown-divider" />
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}</h4>
<label
class="app-profile-general-dropdown-heading"
for="app-view-profile-job-title">
{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}
</label>
@if (generalSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.jobTitle}}</p>
} @else {
<input type="text" value="" formControlName="jobTitle" class="app-profile-general-dropdown-input-details app-selected">
<input
type="text"
value=""
formControlName="jobTitle"
class="app-profile-general-dropdown-input-details app-selected"
id="app-view-profile-job-title">
}
</div>
<mat-divider class="app-general-dropdown-divider" />
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LOCATION' | translate}}</h4>
<label
class="app-profile-general-dropdown-heading"
for="app-view-profile-location">
{{'APP.EDIT_PROFILE.LOCATION' | translate}}
</label>
@if (generalSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.location}}</p>
} @else {
<input type="text" value="" formControlName="location" class="app-profile-general-dropdown-input-details app-selected">
<input
type="text"
value=""
formControlName="location"
class="app-profile-general-dropdown-input-details app-selected"
id="app-view-profile-location">
}
</div>
<mat-divider class="app-general-dropdown-divider" />
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
<label
class="app-profile-general-dropdown-heading"
for="app-view-profile-telephone">
{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}
</label>
@if (generalSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.telephone}}</p>
} @else {
@@ -104,7 +126,8 @@
value=""
formControlName="telephone"
class="app-profile-general-dropdown-input-details app-selected"
aria-describedby="app-view-profile-phone-error-message">
aria-describedby="app-view-profile-phone-error-message"
id="app-view-profile-telephone">
}
@if (profileForm.controls['telephone'].errors) {
<mat-error class="app-error-message" role="alert" id="app-view-profile-phone-error-message">
@@ -114,7 +137,11 @@
</div>
<mat-divider class="app-general-dropdown-divider" />
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.MOBILE' | translate}}</h4>
<label
class="app-profile-general-dropdown-heading"
for="app-view-profile-mobile">
{{'APP.EDIT_PROFILE.MOBILE' | translate}}
</label>
@if (generalSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.mobile}}</p>
} @else {
@@ -123,7 +150,8 @@
value=""
formControlName="mobile"
class="app-profile-general-dropdown-input-details app-selected"
aria-describedby="app-view-profile-mobile-error-message">
aria-describedby="app-view-profile-mobile-error-message"
id="app-view-profile-mobile">
}
@if (profileForm.controls['mobile'].errors) {
<mat-error class="app-error-message" role="alert" id="app-view-profile-mobile-error-message">
@@ -180,34 +208,65 @@
<mat-divider class="app-divider" />
<div class="app-general-dropdown">
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.NAME' | translate}}</h4>
<label
class="app-profile-general-dropdown-heading"
for="app-view-profile-company-name">
{{'APP.EDIT_PROFILE.NAME' | translate}}
</label>
@if (contactSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.organization}}</p>
} @else {
<input type="text" value="" formControlName="companyName" class="app-profile-general-dropdown-input-details app-selected">
<input
type="text"
value=""
formControlName="companyName"
class="app-profile-general-dropdown-input-details app-selected"
id="app-view-profile-company-name">
}
</div>
<mat-divider class="app-general-dropdown-divider" />
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.ADDRESS' | translate}}</h4>
<label
class="app-profile-general-dropdown-heading"
for="app-view-profile-company-address">
{{'APP.EDIT_PROFILE.ADDRESS' | translate}}
</label>
@if (contactSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.address1}}</p>
} @else {
<input type="text" value="" formControlName="companyAddress" class="app-profile-general-dropdown-input-details app-selected">
<input
type="text"
value=""
formControlName="companyAddress"
class="app-profile-general-dropdown-input-details app-selected"
id="app-view-profile-company-address">
}
</div>
<mat-divider class="app-general-dropdown-divider" />
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.POSTCODE' | translate}}</h4>
<label
class="app-profile-general-dropdown-heading"
for="app-view-profile-company-post-code">
{{'APP.EDIT_PROFILE.POSTCODE' | translate}}
</label>
@if (contactSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.postcode}}</p>
} @else {
<input type="text" value="" formControlName="companyPostCode" class="app-profile-general-dropdown-input-details app-selected">
<input
type="text"
value=""
formControlName="companyPostCode"
class="app-profile-general-dropdown-input-details app-selected"
id="app-view-profile-company-post-code">
}
</div>
<mat-divider class="app-general-dropdown-divider" />
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
<label
class="app-profile-general-dropdown-heading"
for="app-view-profile-company-telephone">
{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}
</label>
@if (contactSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.telephone}}</p>
} @else {
@@ -216,7 +275,8 @@
value=""
formControlName="companyTelephone"
class="app-profile-general-dropdown-input-details app-selected"
aria-describedby="app-view-profile-company-phone-error-message">
aria-describedby="app-view-profile-company-phone-error-message"
id="app-view-profile-company-telephone">
}
@if (profileForm.controls['companyTelephone'].errors) {
<mat-error class="app-error-message" role="alert" id="app-view-profile-company-phone-error-message">
@@ -226,7 +286,11 @@
</div>
<mat-divider class="app-general-dropdown-divider" />
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.EMAIL' | translate}}</h4>
<label
class="app-profile-general-dropdown-heading"
for="app-view-profile-company-email">
{{'APP.EDIT_PROFILE.EMAIL' | translate}}
</label>
@if (contactSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.email}}</p>
} @else {
@@ -235,7 +299,8 @@
value=""
formControlName="companyEmail"
class="app-profile-general-dropdown-input-details app-selected"
aria-describedby="app-view-profile-company-email-error-message">
aria-describedby="app-view-profile-company-email-error-message"
id="app-view-profile-company-email">
}
@if (profileForm.controls['companyEmail'].errors) {
<mat-error class="app-error-message" role="alert" id="app-view-profile-company-email-error-message">
@@ -107,6 +107,8 @@ app-view-profile {
width: 20%;
font-weight: 400;
letter-spacing: 0.5px;
margin-top: 1.33em;
margin-bottom: 1.33em;
}
.app-profile-general-dropdown-details {