[DURACOM-347] refactor, fix missing label for library components

Author: FrancescoMolinaro

config/config.example.yml

@@ -237,7 +237,7 @@ submission:
   # If set to true avoid setting placeholder for simple fields, where the placeholder would be the same as the label.
   # The default is set to true as placeholders that do not provide additional information to the field are to be avoided as they could cause accessibility issue.
   # More info on the topic can be found at https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/
-  ignorePlaceholderForSimpleFields:
+  omitSimpleFieldPlaceholders:
 
 
 #  Default Language in which the UI will be rendered if the user's browser language is not an active language

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

@@ -208,6 +208,8 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
   const testItem: Item = new Item();
   const testWSI: WorkspaceItem = new WorkspaceItem();
   testWSI.item = of(createSuccessfulRemoteDataObject(testItem));
+  const renderer = jasmine.createSpyObj('Renderer2', ['setAttribute']);
+
   beforeEach(waitForAsync(() => {
 
     TestBed.configureTestingModule({
@@ -390,4 +392,35 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
     expect(dsDatePickerLabel).toBeNull();
   });
 
+  it('should not call handleAriaLabelForLibraryComponents if is SSR', () => {
+    (component as any).platformId = 'server';
+    (component as any).componentRef = {
+      instance: new DynamicNGBootstrapInputComponent(null, null),
+      location: { nativeElement: document.createElement('div') },
+    } as any;
+    fixture.detectChanges();
+
+    (component as any).handleAriaLabelForLibraryComponents();
+
+    expect(renderer.setAttribute).not.toHaveBeenCalled();
+  });
+
+  it('should set aria-label when valid input and additional property ariaLabel exist and is on browser', () => {
+    (component as any).platformId = 'browser';
+    const inputEl = document.createElement('input');
+    const hostEl = {
+      querySelector: jasmine.createSpy('querySelector').and.returnValue(inputEl),
+    };
+
+    (component as any).componentRef = {
+      instance: new DynamicNGBootstrapInputComponent(null, null),
+      location: { nativeElement: hostEl },
+    } as any;
+    (component as any).renderer = renderer;
+    component.model = { additional: { ariaLabel: 'Accessible Label' } } as any;
+    fixture.detectChanges();
+    (component as any).handleAriaLabelForLibraryComponents();
+    expect(renderer.setAttribute).toHaveBeenCalledWith(inputEl, 'aria-label', 'Accessible Label');
+  });
+
 });

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

@@ -1,5 +1,6 @@
 import {
   AsyncPipe,
+  isPlatformBrowser,
   NgClass,
   NgTemplateOutlet,
 } from '@angular/common';
@@ -18,7 +19,9 @@ import {
   OnDestroy,
   OnInit,
   Output,
+  PLATFORM_ID,
   QueryList,
+  Renderer2,
   SimpleChanges,
   Type,
   ViewChild,
@@ -42,6 +45,7 @@ import {
   DynamicFormArrayModel,
   DynamicFormComponentService,
   DynamicFormControl,
+  DynamicFormControlComponent,
   DynamicFormControlContainerComponent,
   DynamicFormControlEvent,
   DynamicFormControlEventType,
@@ -122,8 +126,10 @@ import {
   ReorderableRelationship,
 } from './existing-metadata-list-element/existing-metadata-list-element.component';
 import { ExistingRelationListElementComponent } from './existing-relation-list-element/existing-relation-list-element.component';
+import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-array.component';
 import { DYNAMIC_FORM_CONTROL_TYPE_CUSTOM_SWITCH } from './models/custom-switch/custom-switch.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER } from './models/date-picker/date-picker.model';
+import { DsDynamicFormGroupComponent } from './models/form-group/dynamic-form-group.component';
 import { DsDynamicLookupRelationModalComponent } from './relation-lookup-modal/dynamic-lookup-relation-modal.component';
 
 @Component({
@@ -214,6 +220,8 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     protected metadataService: MetadataService,
     @Inject(APP_CONFIG) protected appConfig: AppConfig,
     @Inject(DYNAMIC_FORM_CONTROL_MAP_FN) protected dynamicFormControlFn: DynamicFormControlMapFn,
+    protected renderer: Renderer2,
+    @Inject(PLATFORM_ID) protected platformId: string,
   ) {
     super(ref, componentFactoryResolver, layoutService, validationService, dynamicFormComponentService, relationService);
     this.fetchThumbnail = this.appConfig.browseBy.showThumbnails;
@@ -329,6 +337,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
 
   ngAfterViewInit() {
     this.showErrorMessagesPreviousStage = this.showErrorMessages;
+    this.handleAriaLabelForLibraryComponents();
   }
 
   protected createFormControlComponent(): void {
@@ -470,4 +479,23 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     this.subs.push(collection$.subscribe((collection) => this.collection = collection));
 
   }
+
+  private handleAriaLabelForLibraryComponents(): void {
+    if (!isPlatformBrowser(this.platformId)) {
+      return;
+    }
+
+    if ((this.componentRef.instance instanceof DynamicFormControlComponent) &&
+      !(this.componentRef.instance instanceof DsDynamicFormArrayComponent) &&
+      !(this.componentRef.instance instanceof DsDynamicFormGroupComponent) &&
+      this.componentRef.location.nativeElement) {
+      const inputEl: HTMLElement | null =
+        this.componentRef.location.nativeElement.querySelector('input,textarea,select,[role="textbox"]');
+
+
+      if (inputEl &&  this.model?.additional?.ariaLabel) {
+        this.renderer.setAttribute(inputEl, 'aria-label', this.model.additional.ariaLabel);
+      }
+    }
+  }
 }

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

@@ -41,7 +41,7 @@
            class="form-control"
            [attr.aria-labelledby]="'label_' + model.id"
            [attr.autoComplete]="model.autoComplete"
-           [attr.aria-label]="model.label | translate"
+           [attr.aria-label]="(model.label || model?.additional?.ariaLabel) | translate"
            [class.is-invalid]="showErrorMessages"
            [id]="model.id"
            [inputFormatter]="formatter"

src/app/shared/form/builder/parsers/date-field-parser.spec.ts

@@ -68,9 +68,9 @@ describe('DateFieldParser test suite', () => {
     expect(fieldModel.value).toEqual(expectedValue);
   });
 
-  it('should skip setting the placeholder when ignore ignorePlaceholderForSimpleFields is true', () => {
+  it('should skip setting the placeholder when ignore omitSimpleFieldPlaceholders is true', () => {
     const parser = new DateFieldParser(submissionId, field, initFormValues, parserOptions, translateService);
-    parser.ignorePlaceholderForSimpleFields = true;
+    parser.omitSimpleFieldPlaceholders = true;
     const fieldModel = parser.parse();
 
     expect(fieldModel.placeholder).toBeNull();

src/app/shared/form/builder/parsers/field-parser.ts

@@ -54,7 +54,7 @@ export abstract class FieldParser {
    */
   protected typeField: string;
 
-  ignorePlaceholderForSimpleFields: boolean;
+  omitSimpleFieldPlaceholders: boolean;
 
   constructor(
     @Inject(SUBMISSION_ID) protected submissionId: string,
@@ -63,7 +63,7 @@ export abstract class FieldParser {
     @Inject(PARSER_OPTIONS) protected parserOptions: ParserOptions,
     protected translate: TranslateService,
   ) {
-    this.ignorePlaceholderForSimpleFields = environment.submission.ignorePlaceholderForSimpleFields;
+    this.omitSimpleFieldPlaceholders = environment.submission.omitSimpleFieldPlaceholders;
   }
 
   public abstract modelFactory(fieldValue?: FormFieldMetadataValueObject, label?: boolean): any;
@@ -310,8 +310,10 @@ export abstract class FieldParser {
     if (hint) {
       controlModel.hint = this.configData.hints || ' ';
     }
-    if (!this.ignorePlaceholderForSimpleFields) {
+    if (!this.omitSimpleFieldPlaceholders) {
       controlModel.placeholder = this.configData.label;
+    } else {
+      controlModel.additional = { ...controlModel.additional, ariaLabel: this.configData.label };
     }
 
     if (this.configData.mandatory && setErrors) {

src/config/default-app-config.ts

@@ -251,7 +251,7 @@ export class DefaultAppConfig implements AppConfig {
         ],
       },
     },
-    ignorePlaceholderForSimpleFields: true,
+    omitSimpleFieldPlaceholders: true,
   };
 
   // Default Language in which the UI will be rendered if the user's browser language is not an active language

src/config/submission-config.interface.ts

@@ -36,5 +36,5 @@ export interface SubmissionConfig extends Config {
   duplicateDetection: DuplicateDetectionConfig;
   typeBind: TypeBindConfig;
   icons: IconsConfig;
-  ignorePlaceholderForSimpleFields?: boolean;
+  omitSimpleFieldPlaceholders?: boolean;
 }

src/environments/environment.test.ts

@@ -195,7 +195,7 @@ export const environment: BuildConfig = {
         ],
       },
     },
-    ignorePlaceholderForSimpleFields: false,
+    omitSimpleFieldPlaceholders: false,
   },
 
   // NOTE: will log all redux actions and transfers in console