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

(cherry picked from commit 85f1dbc)

Author: Andrea Barbasso

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html

@@ -102,7 +102,7 @@
                   cdkDragHandle [cdkDragHandleDisabled]="disabled" [ngClass]="{'disabled': disabled}" [dsBtnDisabled]="disabled"
                   [title]="dsoType + '.edit.metadata.edit.buttons.drag' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.drag' | translate }}">
-            <i class="fas fa-grip-vertical fa-fw"></i>
+            <i class="drag-icon"></i>
           </button>
         </div>
       </div>

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html

@@ -84,8 +84,7 @@
                 scope="row" id="{{ entry.nameStripped }}" headers="{{ bundleName }} name">
               <div class="drag-handle text-muted float-left p-1 mr-2" tabindex="0" cdkDragHandle
                    (keydown.enter)="select($event, entry)" (keydown.space)="select($event, entry)" (click)="select($event, entry)">
-                <i class="fas fa-grip-vertical fa-fw"
-                   [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
+                      <i class="drag-icon" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
               </div>
               {{ entry.name }}
             </th>

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

@@ -23,7 +23,12 @@
 
       <div *ngIf="!model.hideErrorMessages && showErrorMessages" [id]="id + '_errors'"
            [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
-        <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
+        <small *ngFor="let message of errorMessages" 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>
 
     </div>

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

@@ -52,10 +52,14 @@ import {
   DynamicNGBootstrapTextAreaComponent,
   DynamicNGBootstrapTimePickerComponent,
 } from '@ng-dynamic-forms/ui-ng-bootstrap';
+import { Actions } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxMaskModule } from 'ngx-mask';
-import { of as observableOf } from 'rxjs';
+import {
+  of as observableOf,
+  ReplaySubject,
+} from 'rxjs';
 
 import {
   APP_CONFIG,
@@ -67,7 +71,16 @@ import { Item } from '../../../../core/shared/item.model';
 import { WorkspaceItem } from '../../../../core/submission/models/workspaceitem.model';
 import { SubmissionObjectDataService } from '../../../../core/submission/submission-object-data.service';
 import { VocabularyOptions } from '../../../../core/submission/vocabularies/models/vocabulary-options.model';
+import {
+  SaveForLaterSubmissionFormErrorAction,
+  SaveSubmissionFormErrorAction,
+  SaveSubmissionFormSuccessAction,
+  SaveSubmissionSectionFormErrorAction,
+  SaveSubmissionSectionFormSuccessAction,
+} from '../../../../submission/objects/submission-objects.actions';
 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';
@@ -208,6 +221,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
   const testItem: Item = new Item();
   const testWSI: WorkspaceItem = new WorkspaceItem();
   testWSI.item = observableOf(createSuccessfulRemoteDataObject(testItem));
+  const actions$: ReplaySubject<any> = new ReplaySubject<any>(1);
   beforeEach(waitForAsync(() => {
 
     TestBed.configureTestingModule({
@@ -240,6 +254,8 @@ 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() },
+        { provide: Actions, useValue: actions$ },
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents().then(() => {
@@ -382,4 +398,40 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
     expect(testFn(formModel[25])).toEqual(DsDynamicFormGroupComponent);
   });
 
+  describe('store action subscriptions', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should call announceErrorMessages on SAVE_SUBMISSION_FORM_SUCCESS', () => {
+      spyOn(component, 'announceErrorMessages');
+      actions$.next(new SaveSubmissionFormSuccessAction('1234', [] as any));
+      expect(component.announceErrorMessages).toHaveBeenCalled();
+    });
+
+    it('should call announceErrorMessages on SAVE_SUBMISSION_SECTION_FORM_SUCCESS', () => {
+      spyOn(component, 'announceErrorMessages');
+      actions$.next(new SaveSubmissionSectionFormSuccessAction('1234', [] as any));
+      expect(component.announceErrorMessages).toHaveBeenCalled();
+    });
+
+    it('should call announceErrorMessages on SAVE_SUBMISSION_FORM_ERROR', () => {
+      spyOn(component, 'announceErrorMessages');
+      actions$.next(new SaveSubmissionFormErrorAction('1234'));
+      expect(component.announceErrorMessages).toHaveBeenCalled();
+    });
+
+    it('should call announceErrorMessages on SAVE_FOR_LATER_SUBMISSION_FORM_ERROR', () => {
+      spyOn(component, 'announceErrorMessages');
+      actions$.next(new SaveForLaterSubmissionFormErrorAction('1234'));
+      expect(component.announceErrorMessages).toHaveBeenCalled();
+    });
+
+    it('should call announceErrorMessages on SAVE_SUBMISSION_SECTION_FORM_ERROR', () => {
+      spyOn(component, 'announceErrorMessages');
+      actions$.next(new SaveSubmissionSectionFormErrorAction('1234'));
+      expect(component.announceErrorMessages).toHaveBeenCalled();
+    });
+  });
+
 });

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

@@ -15,6 +15,7 @@ import {
   DoCheck,
   EventEmitter,
   Inject,
+  inject,
   Input,
   OnChanges,
   OnDestroy,
@@ -27,6 +28,7 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import {
+  AbstractControl,
   FormsModule,
   ReactiveFormsModule,
   UntypedFormArray,
@@ -55,6 +57,10 @@ import {
   DynamicTemplateDirective,
 } from '@ng-dynamic-forms/core';
 import { DynamicFormControlMapFn } from '@ng-dynamic-forms/core/lib/service/dynamic-form-component.service';
+import {
+  Actions,
+  ofType,
+} from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import {
   TranslateModule,
@@ -100,6 +106,7 @@ import {
 import { SubmissionObject } from '../../../../core/submission/models/submission-object.model';
 import { SubmissionObjectDataService } from '../../../../core/submission/submission-object-data.service';
 import { paginatedRelationsToItems } from '../../../../item-page/simple/item-types/shared/item-relationships-utils';
+import { SubmissionObjectActionTypes } from '../../../../submission/objects/submission-objects.actions';
 import { SubmissionService } from '../../../../submission/submission.service';
 import { BtnDisabledDirective } from '../../../btn-disabled.directive';
 import {
@@ -108,6 +115,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';
@@ -178,6 +186,8 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
    */
   private subs: Subscription[] = [];
 
+  private liveRegionErrorMessagesShownAlready = false;
+
   /* eslint-disable @angular-eslint/no-output-rename */
   @Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
   @Output('dfChange') change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
@@ -197,6 +207,8 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     return this.dynamicFormControlFn(this.model);
   }
 
+  private readonly liveRegionService = inject(LiveRegionService);
+
   constructor(
     protected componentFactoryResolver: ComponentFactoryResolver,
     protected dynamicFormComponentService: DynamicFormComponentService,
@@ -216,6 +228,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     protected metadataService: MetadataService,
     @Inject(APP_CONFIG) protected appConfig: AppConfig,
     @Inject(DYNAMIC_FORM_CONTROL_MAP_FN) protected dynamicFormControlFn: DynamicFormControlMapFn,
+    private actions$: Actions,
   ) {
     super(ref, componentFactoryResolver, layoutService, validationService, dynamicFormComponentService, relationService);
     this.fetchThumbnail = this.appConfig.browseBy.showThumbnails;
@@ -228,6 +241,18 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     this.isRelationship = hasValue(this.model.relationship);
     const isWrapperAroundRelationshipList = hasValue(this.model.relationshipConfig);
 
+    // Subscribe to specified submission actions to announce error messages
+    const errorAnnounceActionsSub = this.actions$.pipe(
+      ofType(
+        SubmissionObjectActionTypes.SAVE_SUBMISSION_FORM_SUCCESS,
+        SubmissionObjectActionTypes.SAVE_SUBMISSION_SECTION_FORM_SUCCESS,
+        SubmissionObjectActionTypes.SAVE_SUBMISSION_FORM_ERROR,
+        SubmissionObjectActionTypes.SAVE_FOR_LATER_SUBMISSION_FORM_ERROR,
+        SubmissionObjectActionTypes.SAVE_SUBMISSION_SECTION_FORM_ERROR,
+      ),
+    ).subscribe(() => this.announceErrorMessages());
+    this.subs.push(errorAnnounceActionsSub);
+
     if (this.isRelationship || isWrapperAroundRelationshipList) {
       const config = this.model.relationshipConfig || this.model.relationship;
       const relationshipOptions = Object.assign(new RelationshipOptions(), config);
@@ -352,6 +377,36 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     if (this.showErrorMessages) {
       this.destroyFormControlComponent();
       this.createFormControlComponent();
+      this.announceErrorMessages();
+    }
+  }
+
+  /**
+   * Announce error messages to the user
+   */
+  announceErrorMessages() {
+    if (!this.liveRegionErrorMessagesShownAlready) {
+      this.liveRegionErrorMessagesShownAlready = true;
+      const numberOfInvalidInputs = this.getNumberOfInvalidInputs() ?? 1;
+      const timeoutMs = numberOfInvalidInputs * 3500;
+      this.errorMessages.forEach((errorMsg) => {
+        // set timer based on the number of the invalid inputs
+        this.liveRegionService.setMessageTimeOutMs(timeoutMs);
+        const message = this.translateService.instant(errorMsg);
+        this.liveRegionService.addMessage(message);
+      });
+      setTimeout(() => {
+        this.liveRegionErrorMessagesShownAlready = false;
+      }, timeoutMs);
+    }
+  }
+
+  /**
+   * 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.html

@@ -25,7 +25,7 @@
                (keydown.escape)="cancelKeyboardDragAndDrop(sortableElement, idx, length)"
                (keydown.arrowUp)="handleArrowPress($event, dropList, length, idx, 'up')"
                (keydown.arrowDown)="handleArrowPress($event, dropList, length, idx, 'down')">
-            <i class="drag-icon fas fa-grip-vertical fa-fw" [class.drag-disable]="dragDisabled" ></i>
+            <i class="drag-icon" [class.drag-disable]="dragDisabled" aria-hidden="true"></i>
           </div>
           <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
           <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"

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

@@ -16,6 +16,14 @@
   margin-left: calc(-2.3 * var(--bs-spacer));
   margin-right: calc(-0.5 * var(--bs-spacer));
   padding-right: calc(0.5 * var(--bs-spacer));
+  > .col {
+      padding-left: 5px;
+      padding-right: 5px;
+  }
+  .cdk-drag-handle {
+      width: calc(2 * var(--bs-spacer));
+  }
+
   .drag-icon {
     width: calc(2 * var(--bs-spacer));
     color: var(--bs-gray-600);

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

@@ -14,13 +14,17 @@ import {
   DynamicFormValidationService,
   DynamicInputModel,
 } from '@ng-dynamic-forms/core';
+import { provideMockActions } from '@ngrx/effects/testing';
 import { provideMockStore } from '@ngrx/store/testing';
 import {
   TranslateModule,
   TranslateService,
 } from '@ngx-translate/core';
 import { NgxMaskModule } from 'ngx-mask';
-import { of } from 'rxjs';
+import {
+  Observable,
+  of,
+} from 'rxjs';
 
 import {
   APP_CONFIG,
@@ -63,6 +67,7 @@ describe('DsDynamicFormArrayComponent', () => {
         { provide: TranslateService, useValue: translateServiceStub },
         { provide: HttpClient, useValue: {} },
         { provide: SubmissionService, useValue: {} },
+        provideMockActions(() => new Observable<any>()),
         { provide: APP_CONFIG, useValue: environment },
         { provide: DYNAMIC_FORM_CONTROL_MAP_FN, useValue: dsDynamicFormControlMapFn },
         { provide: LiveRegionService, useValue: getLiveRegionServiceStub() },

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

@@ -1,8 +1,8 @@
 <div>
-  <fieldset class="d-flex">
+  <fieldset class="d-flex justify-content-start flex-wrap gap-2">
     <legend *ngIf="!model.repeatable" [id]="'legend_' + model.id" [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]">
       {{model.placeholder}} <span *ngIf="model.required">*</span>
-    </legend>
+      </legend>
     <ds-number-picker
       tabindex="0"
       [id]="model.id + '_year'"
@@ -15,28 +15,30 @@
       [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
+  <ds-number-picker class="date-month"
       tabindex="0"
       [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
+  <ds-number-picker class="date-day"
       tabindex="0"
       [id]="model.id + '_day'"
       [min]="minDay"
@@ -47,6 +49,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)"