[ENG-9082] CAS Register: Form elements must have labels

src/app/features/auth/pages/reset-password/reset-password.component.html

@@ -6,7 +6,7 @@ <h2 class="text-center">{{ 'auth.resetPassword.title' | translate }}</h2>
       <div class="flex flex-column">
         <label for="newPassword">{{ 'auth.common.password.new' | translate }}</label>
         <p-password
-          id="newPassword"
+          inputId="newPassword"
           formControlName="newPassword"
           styleClass="w-full"
           [toggleMask]="true"
@@ -20,7 +20,7 @@ <h2 class="text-center">{{ 'auth.resetPassword.title' | translate }}</h2>
       <div class="flex flex-column">
         <label for="confirmNewPassword">{{ 'auth.common.password.confirm' | translate }}</label>
         <p-password
-          id="confirmNewPassword"
+          inputId="confirmNewPassword"
           formControlName="confirmNewPassword"
           styleClass="w-full"
           [toggleMask]="true"

src/app/features/auth/pages/sign-up/sign-up.component.html

@@ -82,7 +82,7 @@ <h2 class="text-center">{{ 'auth.signUp.title' | translate }}</h2>
             {{ 'auth.common.password.title' | translate }}
           </label>
           <p-password
-            id="password"
+            inputId="password"
             formControlName="password"
             [toggleMask]="true"
             [feedback]="false"
@@ -93,7 +93,7 @@ <h2 class="text-center">{{ 'auth.signUp.title' | translate }}</h2>
         </div>
 
         <div class="flex mt-1">
-          <p-checkbox formControlName="acceptedTermsOfService" [binary]="true" id="agreeTerms"></p-checkbox>
+          <p-checkbox formControlName="acceptedTermsOfService" [binary]="true" inputId="agreeTerms"></p-checkbox>
           <label class="ml-2" for="agreeTerms">
             {{ 'auth.signUp.form.terms.agree' | translate }}
             <a class="font-bold" routerLink="/terms-of-use">{{ 'auth.signUp.form.terms.termsOfUse' | translate }}</a>

src/app/features/collections/components/add-to-collection/project-metadata-step/project-metadata-step.component.html

@@ -98,7 +98,7 @@ <h3>{{ 'collections.addToCollection.resourceMetadata' | translate }}</h3>
                 <div class="w-full md:w-6">
                   <label for="licenseYear"> {{ 'common.labels.year' | translate }} </label>
                   <p-datePicker
-                    id="licenseYear"
+                    inputId="licenseYear"
                     [formControlName]="ProjectMetadataFormControls.LicenseYear"
                     [maxDate]="currentYear"
                     dataType="string"

src/app/features/project/overview/components/add-component-dialog/add-component-dialog.component.html

@@ -59,7 +59,7 @@ <h3 class="font-normal mbx-2">
   </div>
 
   <div class="flex flex-column">
-    <label for="license">{{ 'project.overview.dialog.addComponent.license.title' | translate }}</label>
+    <label>{{ 'project.overview.dialog.addComponent.license.title' | translate }}</label>
     <p class="pt-1" id="license">
       {{
         ('project.overview.dialog.addComponent.license.description' | translate) + ' ' + currentProject()?.title + '.'

src/app/features/registries/components/custom-step/custom-step.component.html

@@ -144,7 +144,7 @@ <h3 class="mb-2">
             }
 
             @case (FieldType.Text) {
-              <input [formControlName]="q.responseKey!" type="text" class="w-full" pInputText />
+              <input [id]="q.groupKey" [formControlName]="q.responseKey!" type="text" class="w-full" pInputText />
               @if (
                 stepForm.controls[q.responseKey!].errors?.['required'] &&
                 (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)

src/app/features/registries/components/registries-metadata-step/registries-metadata-step.component.html

@@ -25,15 +25,15 @@ <h2 class="mb-2">{{ 'common.labels.title' | translate }}</h2>
     <section data-test-registration-description-section>
       <p-card>
         <div class="mt-2">
-          <label for="registration-description-id" class="mb-2">
+          <label for="registration-description" class="mb-2">
             <h2>{{ 'common.labels.description' | translate }}</h2>
           </label>
 
           <p class="mb-1">{{ 'shared.description.message' | translate }}</p>
 
           <textarea
             data-test-metadata-description
-            id="project-description-id"
+            id="registration-description"
             formControlName="description"
             class="w-full"
             rows="5"

src/app/features/registries/components/registries-metadata-step/registries-tags/registries-tags.component.html

@@ -1,11 +1,11 @@
 <p-card>
   <div class="flex flex-column gap-3">
-    <label for="registration-tag-id">
+    <label for="registration-tag">
       <h2>{{ 'project.overview.metadata.tags' | translate }} ({{ 'common.labels.optional' | translate }})</h2>
     </label>
     <p class="mb-1">{{ 'shared.tags.description' | translate }}</p>
     <osf-tags-input
-      id="registration-tag-id"
+      id="registration-tag"
       (tagsChanged)="onTagsChanged($event)"
       [tags]="selectedTags()"
     ></osf-tags-input>

src/app/features/settings/account-settings/components/change-password/change-password.component.html

@@ -8,7 +8,7 @@ <h2>{{ 'settings.accountSettings.changePassword.title' | translate }}</h2>
       </label>
 
       <p-password
-        id="old-password"
+        inputId="old-password"
         class="w-full"
         styleClass="w-full"
         [formControlName]="AccountSettingsPasswordFormControls.OldPassword"
@@ -32,7 +32,7 @@ <h2>{{ 'settings.accountSettings.changePassword.title' | translate }}</h2>
         </label>
 
         <p-password
-          id="new-password"
+          inputId="new-password"
           class="w-full"
           styleClass="w-full"
           [formControlName]="AccountSettingsPasswordFormControls.NewPassword"
@@ -65,7 +65,7 @@ <h2>{{ 'settings.accountSettings.changePassword.title' | translate }}</h2>
         </label>
 
         <p-password
-          id="confirm-password"
+          inputId="confirm-password"
           class="w-full"
           styleClass="w-full"
           [formControlName]="AccountSettingsPasswordFormControls.ConfirmPassword"

src/app/features/settings/account-settings/components/two-factor-auth/two-factor-auth.component.html

@@ -33,7 +33,7 @@ <h2>{{ 'settings.accountSettings.twoFactorAuth.title' | translate }}</h2>
       <label for="code">{{ 'settings.accountSettings.twoFactorAuth.verification.label' | translate }}</label>
 
       <p-inputMask
-        id="code"
+        inputId="code"
         mask="999999"
         [placeholder]="'settings.accountSettings.twoFactorAuth.enterCode' | translate"
         slotChar=""

src/app/features/settings/profile-settings/components/education-form/education-form.component.html

@@ -23,29 +23,29 @@ <h2>
 
     <div class="flex w-full column-gap-3 row-gap-4 flex-wrap lg:flex-nowrap">
       <div class="w-full lg:w-6">
-        <label for="department-{{ index() }}" class="mb-1">
+        <label [for]="'department-' + index()" class="mb-1">
           {{ 'settings.profileSettings.education.department' | translate }}
         </label>
-        <input pInputText [id]="'department-' + index" class="w-full" formControlName="department" />
+        <input pInputText [id]="'department-' + index()" class="w-full" formControlName="department" />
       </div>
 
       <div class="w-full lg:w-6">
-        <label for="degree-{{ index() }}" class="mb-1">
+        <label [for]="'degree-' + index()" class="mb-1">
           {{ 'settings.profileSettings.education.degree' | translate }}
         </label>
-        <input pInputText [id]="'degree-' + index" class="w-full" formControlName="degree" />
+        <input pInputText [id]="'degree-' + index()" class="w-full" formControlName="degree" />
       </div>
     </div>
 
     <div class="flex gap-5 flex-column align-items-start md:flex-row md:align-items-end lg:align-items-center lg:gap-3">
       <div class="flex column-gap-3 row-gap-4 flex-wrap w-full md:w-6 lg:flex-nowrap">
         <div class="w-full lg:w-6">
-          <label for="start-date-{{ index() }}" class="mb-1">
+          <label [for]="'start-date-' + index()" class="mb-1">
             {{ 'settings.profileSettings.education.startDate' | translate }}
           </label>
 
           <p-datepicker
-            [id]="'start-date-' + index"
+            [inputId]="'start-date-' + index()"
             formControlName="startDate"
             [dateFormat]="dateFormat"
             [iconDisplay]="'input'"
@@ -64,12 +64,12 @@ <h2>
 
         @if (!group().controls['ongoing'].value) {
           <div class="w-full lg:w-6">
-            <label for="end-date-{{ index() }}" class="mb-1">
+            <label [for]="'end-date-' + index()" class="mb-1">
               {{ 'settings.profileSettings.education.endDate' | translate }}
             </label>
 
             <p-datepicker
-              [id]="'end-date-' + index"
+              [inputId]="'end-date-' + index()"
               formControlName="endDate"
               [dateFormat]="dateFormat"
               [iconDisplay]="'input'"
@@ -92,11 +92,11 @@ <h2>
         <p-checkbox
           [binary]="true"
           formControlName="ongoing"
-          [inputId]="'ongoing-' + index"
+          [inputId]="'ongoing-' + index()"
           name="ongoing"
         ></p-checkbox>
 
-        <label [for]="'ongoing-' + index" class="ml-2 mb-0 cursor-pointer">
+        <label [for]="'ongoing-' + index()" class="ml-2 mb-0 cursor-pointer">
           {{ 'settings.profileSettings.education.ongoing' | translate }}
         </label>
       </div>

src/app/features/settings/profile-settings/components/employment-form/employment-form.component.html

@@ -23,7 +23,7 @@ <h2>
 
     <div class="flex w-full column-gap-3 row-gap-4 flex-wrap lg:flex-nowrap">
       <div class="w-full lg:w-6">
-        <label for="department-{{ index() }}" class="mb-1">
+        <label [for]="'department-' + index()" class="mb-1">
           {{ 'settings.profileSettings.employment.department' | translate }}
         </label>
 
@@ -42,12 +42,12 @@ <h2>
     <div class="flex gap-5 flex-column align-items-start md:flex-row md:align-items-end lg:align-items-center lg:gap-3">
       <div class="flex column-gap-3 row-gap-4 flex-wrap w-full md:w-6 lg:flex-nowrap">
         <div class="w-full lg:w-6">
-          <label for="start-date-{{ index() }}" class="mb-1">
+          <label [for]="'start-date-' + index()" class="mb-1">
             {{ 'settings.profileSettings.employment.startDate' | translate }}
           </label>
 
           <p-datepicker
-            [id]="'start-date-' + index"
+            [inputId]="'start-date-' + index()"
             formControlName="startDate"
             [dateFormat]="dateFormat"
             [iconDisplay]="'input'"
@@ -66,12 +66,12 @@ <h2>
 
         @if (!group().controls['ongoing'].value) {
           <div class="w-full lg:w-6">
-            <label for="end-date-{{ index() }}" class="mb-1">
+            <label [for]="'end-date-' + index()" class="mb-1">
               {{ 'settings.profileSettings.employment.endDate' | translate }}
             </label>
 
             <p-datepicker
-              [id]="'end-date-' + index"
+              [inputId]="'end-date-' + index()"
               formControlName="endDate"
               [dateFormat]="dateFormat"
               [iconDisplay]="'input'"
@@ -94,11 +94,11 @@ <h2>
         <p-checkbox
           [binary]="true"
           formControlName="ongoing"
-          [inputId]="'ongoing-' + index"
+          [inputId]="'ongoing-' + index()"
           name="ongoing"
         ></p-checkbox>
 
-        <label [for]="'ongoing-' + index" class="ml-2 mb-0 cursor-pointer">
+        <label [for]="'ongoing-' + index()" class="ml-2 mb-0 cursor-pointer">
           {{ 'settings.profileSettings.employment.presentlyEmployed' | translate }}
         </label>
       </div>

src/app/features/settings/profile-settings/components/social-form/social-form.component.html

@@ -10,7 +10,7 @@ <h2>
 
   <div class="flex flex-column row-gap-4 w-full md:flex-row md:align-items-end md:column-gap-3">
     <div class="w-full md:w-12">
-      <label for="id">{{ label() | translate }}</label>
+      <label [for]="'social-input' + index()">{{ label() | translate }}</label>
 
       <p-inputgroup class="addon-input flex-wrap">
         @if (domain()) {
@@ -19,7 +19,13 @@ <h2>
           </p-inputgroup-addon>
         }
 
-        <input pInputText [placeholder]="placeholder()" formControlName="webAddress" [maxlength]="socialMaxLength" />
+        <input
+          pInputText
+          [id]="'social-input' + index()"
+          [placeholder]="placeholder()"
+          formControlName="webAddress"
+          [maxlength]="socialMaxLength"
+        />
 
         @if (hasLinkedField()) {
           <p-inputgroup-addon class="border-1 grey-border-color md:border-0"> {{ linkedDomain() }} </p-inputgroup-addon>

src/app/shared/components/license/license.component.html

@@ -16,7 +16,7 @@
       <div class="w-full md:w-6">
         <label for="licenseYear"> {{ 'common.labels.year' | translate }} </label>
         <p-datePicker
-          id="licenseYear"
+          inputId="licenseYear"
           formControlName="year"
           [maxDate]="currentYear"
           dataType="string"

src/app/shared/components/subjects/subjects.component.html

@@ -45,7 +45,7 @@ <h2 class="mb-2">{{ 'shared.subjects.title' | translate }}</h2>
               (onChange)="selectSearched($event, subjects)"
               [binary]="true"
             />
-            <label for="subjects-{{ $index }}" class="flex flex-wrap ml-2">
+            <label [for]="'subjects-' + $index" class="flex flex-wrap ml-2">
               @for (item of subjects; track item.id) {
                 <span [class]="$last ? 'font-bold' : ''">{{ item.name }}</span>
                 @if (!$last) {