Fixed user authentication/registration accessibility issue

- Added the correct autocomplete value
- Removed dangling labels, because aria labels already describe those input fields & we can't use ids in this component because otherwise there are duplicate ids on the /login page

Author: alexandrevryghem

src/app/forgot-password/forgot-password-form/forgot-password-form.component.html

@@ -1,13 +1,13 @@
 <div class="container" *ngIf="(registration$ |async)">
-    <h3 class="mb-4">{{'forgot-password.form.head' | translate}}</h3>
+    <h1 class="mb-4">{{'forgot-password.form.head' | translate}}</h1>
     <div class="card mb-4">
         <div class="card-header">{{'forgot-password.form.identification.header' | translate}}</div>
         <div class="card-body">
             <div class="row">
                 <div class="col-12">
-                    <label class="font-weight-bold"
-                           for="email">{{'forgot-password.form.identification.email' | translate}}</label>
-                    <span id="email">{{(registration$ |async).email}}</span></div>
+                    <span class="font-weight-bold">{{'forgot-password.form.identification.email' | translate}} </span>
+                    <span [attr.data-test]="'email' | dsBrowserOnly">{{(registration$ |async).email}}</span>
+                </div>
             </div>
         </div>
     </div>

src/app/forgot-password/forgot-password-form/forgot-password-form.component.spec.ts

@@ -21,6 +21,7 @@ import {
   createSuccessfulRemoteDataObject$
 } from '../../shared/remote-data.utils';
 import { CoreState } from '../../core/core-state.model';
+import { BrowserOnlyPipe } from '../../shared/utils/browser-only.pipe';
 
 describe('ForgotPasswordFormComponent', () => {
   let comp: ForgotPasswordFormComponent;
@@ -54,7 +55,10 @@ describe('ForgotPasswordFormComponent', () => {
 
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), ReactiveFormsModule],
-      declarations: [ForgotPasswordFormComponent],
+      declarations: [
+        BrowserOnlyPipe,
+        ForgotPasswordFormComponent,
+      ],
       providers: [
         {provide: Router, useValue: router},
         {provide: ActivatedRoute, useValue: route},
@@ -75,7 +79,7 @@ describe('ForgotPasswordFormComponent', () => {
 
   describe('init', () => {
     it('should initialise mail address', () => {
-      const elem = fixture.debugElement.queryAll(By.css('span#email'))[0].nativeElement;
+      const elem = fixture.debugElement.queryAll(By.css('span[data-test="email"]'))[0].nativeElement;
       expect(elem.innerHTML).toContain('test@email.org');
     });
   });

src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.ts

@@ -43,7 +43,8 @@ export class ProfilePageMetadataFormComponent implements OnInit {
     new DynamicInputModel({
       id: 'email',
       name: 'email',
-      readOnly: true
+      readOnly: true,
+      disabled: true,
     }),
     new DynamicInputModel({
       id: 'firstname',
@@ -55,6 +56,7 @@ export class ProfilePageMetadataFormComponent implements OnInit {
       errorMessages: {
         required: 'This field is required'
       },
+      autoComplete: 'given-name',
     }),
     new DynamicInputModel({
       id: 'lastname',
@@ -66,10 +68,12 @@ export class ProfilePageMetadataFormComponent implements OnInit {
       errorMessages: {
         required: 'This field is required'
       },
+      autoComplete: 'family-name',
     }),
     new DynamicInputModel({
       id: 'phone',
-      name: 'eperson.phone'
+      name: 'eperson.phone',
+      autoComplete: 'tel',
     }),
     new DynamicSelectModel<string>({
       id: 'language',

src/app/profile-page/profile-page-security-form/profile-page-security-form.component.ts

@@ -39,12 +39,14 @@ export class ProfilePageSecurityFormComponent implements OnInit {
     new DynamicInputModel({
       id: 'password',
       name: 'password',
-      inputType: 'password'
+      inputType: 'password',
+      autoComplete: 'new-password',
     }),
     new DynamicInputModel({
       id: 'passwordrepeat',
       name: 'passwordrepeat',
-      inputType: 'password'
+      inputType: 'password',
+      autoComplete: 'new-password',
     })
   ];
 
@@ -79,7 +81,8 @@ export class ProfilePageSecurityFormComponent implements OnInit {
         id: 'current-password',
         name: 'current-password',
         inputType: 'password',
-        required: true
+        required: true,
+        autoComplete: 'current-password',
       }));
     }
     if (this.passwordCanBeEmpty) {

src/app/profile-page/profile-page.component.html

@@ -1,8 +1,7 @@
 <ng-container *ngVar="(user$ | async) as user">
   <div class="container" *ngIf="user">
     <h1>{{'profile.title' | translate}}</h1>
-    <ng-container *ngIf="isResearcherProfileEnabled() | async">
-      <h2 class="mb-4">{{'profile.head' | translate}}</h2>
+    <ng-container>
       <div class="card mb-4">
         <div class="card-header">{{'profile.card.researcher' | translate}}</div>
         <div class="card-body">

src/app/shared/log-in/methods/password/log-in-password.component.html

@@ -1,19 +1,17 @@
 <form class="form-login"
       (ngSubmit)="submit()"
       [formGroup]="form" novalidate>
-  <label class="sr-only">{{"login.form.email" | translate}}</label>
   <input [attr.aria-label]="'login.form.email' |translate"
-         autocomplete="off"
+         autocomplete="username"
          autofocus
          class="form-control form-control-lg position-relative"
          formControlName="email"
          placeholder="{{'login.form.email' | translate}}"
          required
          type="email"
          [attr.data-test]="'email' | dsBrowserOnly">
-  <label class="sr-only">{{"login.form.password" | translate}}</label>
   <input [attr.aria-label]="'login.form.password' |translate"
-         autocomplete="off"
+         autocomplete="current-password"
          class="form-control form-control-lg position-relative mb-3"
          placeholder="{{'login.form.password' | translate}}"
          formControlName="password"

src/assets/i18n/en.json5

@@ -1720,7 +1720,7 @@
 
   "forgot-password.form.label.passwordrepeat": "Retype to confirm",
 
-  "forgot-password.form.error.empty-password": "Please enter a password in the box below.",
+  "forgot-password.form.error.empty-password": "Please enter a password in the boxes above.",
 
   "forgot-password.form.error.matching-passwords": "The passwords do not match.",
 
@@ -3490,8 +3490,6 @@
 
   "profile.special.groups.head": "Authorization special groups you belong to",
 
-  "profile.head": "Update Profile",
-
   "profile.metadata.form.error.firstname.required": "First Name is required",
 
   "profile.metadata.form.error.lastname.required": "Last Name is required",