[CST-16756] fix submission form's "serious" accessibility issues

Author: Andrea Barbasso

src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.spec.ts

@@ -27,6 +27,8 @@ import { DragService } from '../../core/drag.service';
 import { CookieService } from '../../core/services/cookie.service';
 import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
 import { HostWindowService } from '../../shared/host-window.service';
+import { LiveRegionService } from '../../shared/live-region/live-region.service';
+import { getLiveRegionServiceStub } from '../../shared/live-region/live-region.service.stub';
 import { CookieServiceMock } from '../../shared/mocks/cookie.service.mock';
 import { HttpXsrfTokenExtractorMock } from '../../shared/mocks/http-xsrf-token-extractor.mock';
 import { getMockScrollToService } from '../../shared/mocks/scroll-to-service.mock';
@@ -76,6 +78,7 @@ describe('MyDSpaceNewSubmissionComponent test', () => {
         { provide: CookieService, useValue: new CookieServiceMock() },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
         { provide: EntityTypeDataService, useValue: getMockEntityTypeService() },
+        { provide: LiveRegionService, useValue: getLiveRegionServiceStub() },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html

@@ -32,7 +32,12 @@
         <div [id]="id + '_errors'"
           [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
           @for (message of errorMessages; track message) {
-            <small class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
+            <small class="invalid-feedback d-block"
+               aria-required="true"
+               aria-invalid="true"
+               [attr.aria-describedby]="'label_' + model.id"
+               aria-live="assertive"
+          >{{ message | translate: model.validators }}</small>
           }
         </div>
       }

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts

@@ -68,6 +68,8 @@ import { WorkspaceItem } from '../../../../core/submission/models/workspaceitem.
 import { SubmissionObjectDataService } from '../../../../core/submission/submission-object-data.service';
 import { VocabularyOptions } from '../../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { SubmissionService } from '../../../../submission/submission.service';
+import { LiveRegionService } from '../../../live-region/live-region.service';
+import { getLiveRegionServiceStub } from '../../../live-region/live-region.service.stub';
 import { SelectableListService } from '../../../object-list/selectable-list/selectable-list.service';
 import { createSuccessfulRemoteDataObject } from '../../../remote-data.utils';
 import { FormBuilderService } from '../form-builder.service';
@@ -240,6 +242,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
         { provide: APP_CONFIG, useValue: environment },
         { provide: APP_DATA_SERVICES_MAP, useValue: {} },
         { provide: DYNAMIC_FORM_CONTROL_MAP_FN, useValue: dsDynamicFormControlMapFn },
+        { provide: LiveRegionService, useValue: getLiveRegionServiceStub() },
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents().then(() => {

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts

@@ -13,6 +13,7 @@ import {
   DoCheck,
   EventEmitter,
   Inject,
+  inject,
   Input,
   OnChanges,
   OnDestroy,
@@ -25,6 +26,7 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import {
+  AbstractControl,
   FormsModule,
   ReactiveFormsModule,
   UntypedFormArray,
@@ -107,6 +109,7 @@ import {
   isNotEmpty,
   isNotUndefined,
 } from '../../../empty.util';
+import { LiveRegionService } from '../../../live-region/live-region.service';
 import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 import { SelectableListState } from '../../../object-list/selectable-list/selectable-list.reducer';
 import { SelectableListService } from '../../../object-list/selectable-list/selectable-list.service';
@@ -194,6 +197,8 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     return this.dynamicFormControlFn(this.model);
   }
 
+  private readonly liveRegionService = inject(LiveRegionService);
+
   constructor(
     protected componentFactoryResolver: ComponentFactoryResolver,
     protected dynamicFormComponentService: DynamicFormComponentService,
@@ -349,6 +354,31 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     if (this.showErrorMessages) {
       this.destroyFormControlComponent();
       this.createFormControlComponent();
+      this.announceErrorMessages();
+    }
+  }
+
+  /**
+   * Announce error messages to the user
+   */
+  announceErrorMessages() {
+    const numberOfInvalidInputs = this.getNumberOfInvalidInputs() ?? 1;
+    setTimeout(() => {
+      this.errorMessages.forEach((errorMsg) => {
+        // set timer based on the number of the invalid inputs
+        this.liveRegionService.setMessageTimeOutMs(numberOfInvalidInputs * 3500);
+        const message = this.translateService.instant(errorMsg);
+        this.liveRegionService.addMessage(message);
+      });
+    }, 14000);// wait for the general deposit alert to be announced
+  }
+
+  /**
+   * Get the number of invalid inputs in the formGroup
+   */
+  private getNumberOfInvalidInputs(): number {
+    if (this.formGroup && this.formGroup.controls) {
+      return Object.values(this.formGroup.controls).filter((control: AbstractControl) => control.invalid).length;
     }
   }
 

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss

@@ -29,7 +29,6 @@
     }
 
     .drag-icon {
-        visibility: hidden;
         width: calc(2 * var(--bs-spacer));
         color: var(--bs-gray-600);
         margin: var(--bs-btn-padding-y) 0;

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html

@@ -1,14 +1,15 @@
 <div>
-  <fieldset class="d-flex">
+  <fieldset class="d-flex justify-content-start flex-wrap gap-2">
     @if (!model.repeatable) {
       <legend [id]="'legend_' + model.id" [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]">
-        {{model.placeholder}} @if (model.required) {
-        <span>*</span>
-      }
-    </legend>
-  }
+        {{ model.placeholder }}
+        @if (model.required) {
+          <span>*</span>
+        }
+      </legend>
+    }
   <ds-number-picker
-    tabindex="0"
+    tabindex="1"
     [id]="model.id + '_year'"
     [disabled]="model.disabled"
     [min]="minYear"
@@ -19,29 +20,31 @@
     [value]="year"
     [invalid]="showErrorMessages"
     [placeholder]="'form.date-picker.placeholder.year' | translate"
+    [widthClass]="'four-digits'"
     (blur)="onBlur($event)"
     (change)="onChange($event)"
     (focus)="onFocus($event)"
   ></ds-number-picker>
 
-  <ds-number-picker
-    tabindex="0"
+  <ds-number-picker class="date-month"
+    tabindex="2"
     [id]="model.id + '_month'"
     [min]="minMonth"
     [max]="maxMonth"
     [name]="'month'"
-    [size]="6"
+    [size]="2"
     [(ngModel)]="initialMonth"
     [value]="month"
     [placeholder]="'form.date-picker.placeholder.month' | translate"
     [disabled]="!year || model.disabled"
+    [widthClass]="'two-digits'"
     (blur)="onBlur($event)"
     (change)="onChange($event)"
     (focus)="onFocus($event)"
   ></ds-number-picker>
 
-  <ds-number-picker
-    tabindex="0"
+  <ds-number-picker class="date-day"
+    tabindex="3"
     [id]="model.id + '_day'"
     [min]="minDay"
     [max]="maxDay"
@@ -51,6 +54,7 @@
     [value]="day"
     [placeholder]="'form.date-picker.placeholder.day' | translate"
     [disabled]="!month || model.disabled"
+    [widthClass]="'two-digits'"
     (blur)="onBlur($event)"
     (change)="onChange($event)"
     (focus)="onFocus($event)"

src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.spec.ts

@@ -44,6 +44,8 @@ import { SubmissionObjectDataService } from '../../../../../../core/submission/s
 import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service';
 import { XSRFService } from '../../../../../../core/xsrf/xsrf.service';
 import { SubmissionService } from '../../../../../../submission/submission.service';
+import { LiveRegionService } from '../../../../../live-region/live-region.service';
+import { getLiveRegionServiceStub } from '../../../../../live-region/live-region.service.stub';
 import { createTestComponent } from '../../../../../testing/utils.test';
 import { VocabularyServiceStub } from '../../../../../testing/vocabulary-service.stub';
 import { Chips } from '../../../../chips/models/chips.model';
@@ -184,6 +186,7 @@ describe('DsDynamicRelationGroupComponent test suite', () => {
         { provide: APP_CONFIG, useValue: environment },
         { provide: APP_DATA_SERVICES_MAP, useValue: {} },
         { provide: DYNAMIC_FORM_CONTROL_MAP_FN, useValue: dsDynamicFormControlMapFn },
+        { provide: LiveRegionService, useValue: getLiveRegionServiceStub() },
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     })

src/app/shared/form/form.component.html

@@ -17,8 +17,8 @@
           <div
             class="col-2 d-flex flex-column justify-content-sm-start align-items-end">
             <button type="button" class="btn btn-secondary" role="button"
-              title="{{'form.remove' | translate}}"
-              [attr.aria-label]="'form.remove' | translate"
+                    title="{{('form.remove' | translate) + ' ' + (context.label ?? context.name) + ' ' + index}}"
+                    [attr.aria-label]="('form.remove' | translate) + ' ' + (context.label ?? context.name) + ' ' + index"
               (click)="removeItem($event, context, index)">
               <span><i class="fas fa-trash" aria-hidden="true"></i></span>
             </button>
@@ -28,8 +28,8 @@
           <div class="clearfix ps-4 w-100">
             <div class="btn-group" role="group">
               <button type="button" role="button" class="ds-form-add-more btn btn-link"
-                title="{{'form.add' | translate}}"
-                attr.aria-label="{{'form.add' | translate}}"
+                    title="{{('form.add' | translate) + ' ' + (context.label ?? context.name)}}"
+                    [attr.aria-label]="('form.add' | translate ) + ' ' + (context.label ?? context.name)"
                 (click)="insertItem($event, group.context, group.context.groups.length)">
                 <span><i class="fas fa-plus"></i> {{'form.add' | translate}}</span>
               </button>

src/app/shared/form/number-picker/number-picker.component.html

@@ -1,38 +1,46 @@
-<div class="d-flex flex-column align-items-center justify-content-around me-3">
-    <button
-      class="btn btn-link-focus"
-      type="button"
-      tabindex="0"
-      [dsBtnDisabled]="disabled"
-      (click)="toggleUp()">
+<div class="d-flex flex-column align-items-center">
+  <label class="ml-n3" [for]="id">{{'form.number-picker.label.' + placeholder | translate }}</label>
+  <div class="d-flex flex-column align-items-stretch justify-content-around position-relative">
+    <button id="increment-{{id}}"
+            class="btn btn-link-focus btn-date ml-2"
+            type="button"
+            tabindex="0"
+            [dsBtnDisabled]="disabled"
+            (click)="toggleUp()"
+            title="{{'form.number-picker.increment' | translate: {field: placeholder} }}"
+            [attr.aria-label]="'form.number-picker.increment' | translate: {field: placeholder}">
       <span class="chevron"></span>
       <span class="sr-only">{{'form.number-picker.increment' | translate: {field: name} }}</span>
     </button>
     <input
-      id="{{id}}"
-      type="text"
-      class="form-control d-inline-block text-center"
-      maxlength="{{size}}"
-      size="{{size}}"
-      placeholder="{{placeholder}}"
-      [name]="name"
-      [(ngModel)]="value"
-      (blur)="onBlur($event); $event.stopPropagation();"
-      (change)="update($event); $event.stopPropagation();"
-      (focus)="onFocus($event); $event.stopPropagation();"
-      [readonly]="disabled"
-      [disabled]="disabled"
-      [ngClass]="{'is-invalid': invalid}"
-      title="{{placeholder}}"
-      [attr.aria-label]="placeholder"
+        id="{{id}}"
+        type="text"
+        class="form-control d-inline-block text-center {{ widthClass }}"
+        maxlength="{{size}}"
+        size="{{size}}"
+        [name]="name"
+        [(ngModel)]="value"
+        (blur)="onBlur($event); $event.stopPropagation();"
+        (change)="update($event); $event.stopPropagation();"
+        (focus)="onFocus($event); $event.stopPropagation();"
+        [readonly]="disabled"
+        [disabled]="disabled"
+        [ngClass]="{'is-invalid': invalid}"
+        placeholder="{{'form.number-picker.label.' + placeholder | translate }}"
+        title="{{'form.number-picker.label.' + placeholder | translate}}"
+        [attr.aria-labelledby]="id + ' increment-' + id + ' decrement-' + id"
     >
-    <button
-      class="btn btn-link-focus"
-      type="button"
-      tabindex="0"
-      [dsBtnDisabled]="disabled"
-      (click)="toggleDown()">
-      <span class="chevron bottom"></span>
-      <span class="sr-only">{{'form.number-picker.decrement' | translate: {field: name} }}</span>
-    </button>
+
+        <button id="decrement-{{id}}"
+                class="btn btn-link-focus btn-date ml-2"
+                type="button"
+                tabindex="0"
+                [dsBtnDisabled]="disabled"
+                (click)="toggleDown()"
+                title="{{'form.number-picker.decrement' | translate: {field: placeholder} }}"
+                [attr.aria-label]="'form.number-picker.decrement' | translate: {field: placeholder}">
+            <span class="chevron bottom"></span>
+            <span class="sr-only">{{'form.number-picker.decrement' | translate: {field: name} }}</span>
+        </button>
+  </div>
 </div>

src/app/shared/form/number-picker/number-picker.component.scss

@@ -4,24 +4,32 @@
 
 .chevron::before {
   border-style: solid;
-  border-width: 0.29em 0.29em 0 0;
+  border-width: 0.19em 0.19em 0 0;
   content: '';
   display: inline-block;
   height: 0.69em;
-  left: 0.05em;
   position: relative;
-  top: 0.15em;
+  top: -0.15rem;
   transform: rotate(-45deg);
   vertical-align: middle;
   width: 0.71em;
 }
 .chevron.bottom:before {
-  top: -.3em;
+  top: -.45em;
   transform: rotate(135deg);
 }
 
-input {
-  max-width: 80px !important;
+.btn-date {
+  max-height: 1.1rem;
+  padding: 0;
+}
+
+.four-digits {
+  width: 90px;
+}
+
+.two-digits {
+  width: 80px;
 }
 
 .btn-link-focus {