Merge pull request DSpace#3272 from Neki-IT/AccessibilityInNewUserReg…

…istration Improving accessibility on the new user registration page
4Science · Nov 1, 2024 · 4fd3df4 · 4fd3df4
2 parents f2c2fda + 009da08
commit 4fd3df4
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
@@ -290,5 +290,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
@@ -6743,4 +6743,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",
 }
diff --git a/src/assets/i18n/es.json5 b/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",
+
 
 }
diff --git a/src/assets/i18n/pt-BR.json5 b/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",
 }