Merge pull request #3592 from DSpace/backport-3272-to-dspace-7_x

[Port dspace-7_x] Improving accessibility on the new user registration page
DSpace · Nov 1, 2024 · 9d4eeb9 · 9d4eeb9
2 parents 0a005c2 + 1011468
commit 9d4eeb9
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 4 deletions.
diff --git a/src/app/register-email-form/register-email-form.component.html b/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(', ') } }}

diff --git a/src/app/register-email-form/register-email-form.component.ts b/src/app/register-email-form/register-email-form.component.ts
@@ -247,5 +247,4 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
         console.warn(`Unimplemented notification '${key}' from reCaptcha service`);
     }
   }
-
 }
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
@@ -5369,4 +5369,8 @@
   "process.overview.unknown.user": "Unknown",
 
   "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",
 }
diff --git a/src/assets/i18n/es.json5 b/src/assets/i18n/es.json5
@@ -7831,5 +7831,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",
+
 
 }
diff --git a/src/assets/i18n/pt-BR.json5 b/src/assets/i18n/pt-BR.json5
@@ -7857,4 +7857,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",
 }