Merge pull request #3593 from DSpace/backport-3272-to-dspace-8_x

[Port dspace-8_x] Improving accessibility on the new user registration page

Author: tdonohue

src/app/register-email-form/register-email-form.component.html

@@ -14,13 +14,16 @@ <h1>{{MESSAGE_PREFIX + '.header'|translate}}</h1>
                     <label class="font-weight-bold"
                            for="email">{{MESSAGE_PREFIX + '.email' | translate}}</label>
                     <input [className]="(email.invalid) && (email.dirty || email.touched) ? 'form-control is-invalid' :'form-control'"
-                           type="text" id="email" formControlName="email"/>
+                           type="text" id="email" formControlName="email"
+                           [attr.aria-label]="MESSAGE_PREFIX + '.aria.label' | translate"
+                           [attr.aria-describedby]="(!email.errors) ? '' : (email.errors.required ? 'email-errors-required' : 'email-error-not-valid')"
+                           [attr.aria-invalid]="email.invalid"/>
                     <div *ngIf="email.invalid && (email.dirty || email.touched)"
                          class="invalid-feedback show-feedback">
-                    <span *ngIf="email.errors && email.errors.required">
+                    <span *ngIf="email.errors && email.errors.required" id="email-errors-required">
                         {{ MESSAGE_PREFIX + '.email.error.required' | translate }}
                     </span>
-                    <span *ngIf="email.errors && ((email.errors.pattern && this.typeRequest === TYPE_REQUEST_REGISTER) || email.errors.email)">
+                    <span *ngIf="email.errors && ((email.errors.pattern && this.typeRequest === TYPE_REQUEST_REGISTER) || email.errors.email)" id="email-error-not-valid">
                         {{ MESSAGE_PREFIX + '.email.error.not-email-form' | translate }}
                         <ng-container *ngIf="validMailDomains.length > 0">
                           {{ MESSAGE_PREFIX + '.email.error.not-valid-domain' | translate: { domains: validMailDomains.join(', ') } }}

src/app/register-email-form/register-email-form.component.ts

@@ -290,5 +290,4 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
         console.warn(`Unimplemented notification '${key}' from reCaptcha service`);
     }
   }
-
 }

src/assets/i18n/en.json5

@@ -6741,4 +6741,8 @@
   "item.page.cc.license.disclaimer": "Except where otherwised noted, this item's license is described as",
 
   "browse.search-form.placeholder": "Search the repository",
+
+  "register-page.registration.aria.label": "Enter your e-mail address",
+
+  "forgot-email.form.aria.label": "Enter your e-mail address",
 }

src/assets/i18n/es.json5

@@ -8152,5 +8152,11 @@
   //"browse.search-form.placeholder": "Search the repository",
   "browse.search-form.placeholder": "Buscar en el repositorio",
 
+  // "register-page.registration.aria.label": "Enter your e-mail address",
+  "register-page.registration.aria.label": "Introduzca su dirección de correo electrónico",
+
+  // "forgot-email.form.aria.label": "Enter your e-mail address",
+  "forgot-email.form.aria.label": "Introduzca su dirección de correo electrónico",
+
 
 }

src/assets/i18n/pt-BR.json5

@@ -10249,4 +10249,10 @@
 
   //"browse.search-form.placeholder": "Search the repository",
   "browse.search-form.placeholder": "Buscar no repositório",
+
+  // "register-page.registration.aria.label": "Enter your e-mail address",
+  "register-page.registration.aria.label": "Digite seu e-mail",
+
+  // "forgot-email.form.aria.label": "Enter your e-mail address",
+  "forgot-email.form.aria.label": "Digite seu e-mail",
 }