[DURACOM-347] refactor, add test and doc

Author: FrancescoMolinaro

config/config.example.yml

@@ -220,6 +220,11 @@ submission:
         - value: default
           style: text-muted
           icon: fa-circle-xmark
+  # 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:
+
 
 #  Default Language in which the UI will be rendered if the user's browser language is not an active language
 defaultLanguage: en

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

@@ -1,14 +1,14 @@
 <div [class.mb-2]="hasLabel || model.type === 'DATE' || (model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('mb-2')"
      [class.d-none]="model.hidden"
-  [formGroup]="group"
-  [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
+     [formGroup]="group"
+     [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
   @if (!isCheckbox && hasLabel && !isDateField) {
     <label
       [id]="'label_' + model.id"
       [for]="id"
       class="form-label"
       [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
-    [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
+      [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
   }
   <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: { $implicit: model };"></ng-container>
   <!--    Should be *ngIf instead of class d-none, but that breaks the #componentViewContainer reference-->
@@ -20,8 +20,7 @@
       </div>
 
       @if (hasHint && (formBuilderService.hasArrayGroupValue(model) || (!model.repeatable && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)) {
-<small
-             class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+        <small class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
       }
       <!-- In case of repeatable fields show empty space for all elements except the first -->
       @if (context?.parent?.groups?.length > 1 && (!showErrorMessages || errorMessages.length === 0)) {

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

@@ -382,4 +382,12 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
     expect(testFn(formModel[25])).toEqual(DsDynamicFormGroupComponent);
   });
 
+  it('should not show a label if is a checkbox or a date field', () => {
+    const checkboxLabel =  fixture.debugElement.query(By.css('#label_' + formModel[0].id));
+    const dsDatePickerLabel =  fixture.debugElement.query(By.css('#label_' + formModel[22].id));
+
+    expect(checkboxLabel).toBeNull();
+    expect(dsDatePickerLabel).toBeNull();
+  });
+
 });

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

@@ -99,7 +99,6 @@ import { SubmissionObject } from '../../../../core/submission/models/submission-
 import { SubmissionObjectDataService } from '../../../../core/submission/submission-object-data.service';
 import { paginatedRelationsToItems } from '../../../../item-page/simple/item-types/shared/item-relationships-utils';
 import { SubmissionService } from '../../../../submission/submission.service';
-import { BtnDisabledDirective } from '../../../btn-disabled.directive';
 import {
   hasNoValue,
   hasValue,
@@ -122,6 +121,7 @@ import {
 } from './existing-metadata-list-element/existing-metadata-list-element.component';
 import { ExistingRelationListElementComponent } from './existing-relation-list-element/existing-relation-list-element.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 { DsDynamicLookupRelationModalComponent } from './relation-lookup-modal/dynamic-lookup-relation-modal.component';
 
 @Component({
@@ -139,7 +139,6 @@ import { DsDynamicLookupRelationModalComponent } from './relation-lookup-modal/d
     NgbTooltipModule,
     NgTemplateOutlet,
     ExistingRelationListElementComponent,
-    BtnDisabledDirective,
   ],
   standalone: true,
 })
@@ -301,6 +300,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     return this.model.type === DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX || this.model.type === DYNAMIC_FORM_CONTROL_TYPE_CUSTOM_SWITCH;
   }
 
+
   get isDateField(): boolean {
     return this.model.type === DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER;
   }

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

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

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

@@ -11,7 +11,7 @@ export class DateFieldParser extends FieldParser {
 
   public modelFactory(fieldValue?: FormFieldMetadataValueObject, label?: boolean): any {
     let malformedDate = false;
-    const inputDateModelConfig: DynamicDsDatePickerModelConfig = this.initModel(null, label, true);
+    const inputDateModelConfig: DynamicDsDateControlModelConfig = this.initModel(null, label, true);
     inputDateModelConfig.legend = this.configData.repeatable ? null : this.configData.label;
     inputDateModelConfig.disabled = inputDateModelConfig.readOnly;
     inputDateModelConfig.toggleIcon = 'fas fa-calendar';

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

@@ -11,6 +11,7 @@ import {
 import { TranslateService } from '@ngx-translate/core';
 import uniqueId from 'lodash/uniqueId';
 
+import { environment } from '../../../../../environments/environment';
 import { SubmissionScopeType } from '../../../../core/submission/submission-scope-type';
 import { VocabularyOptions } from '../../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { isNgbDateStruct } from '../../../date.util';
@@ -36,7 +37,6 @@ import { VisibilityType } from './../../../../submission/sections/visibility-typ
 import { setLayout } from './parser.utils';
 import { ParserOptions } from './parser-options';
 import { ParserType } from './parser-type';
-import { environment } from "../../../../../environments/environment";
 
 export const SUBMISSION_ID: InjectionToken<string> = new InjectionToken<string>('submissionId');
 export const CONFIG_DATA: InjectionToken<FormFieldModel> = new InjectionToken<FormFieldModel>('configData');
@@ -58,13 +58,16 @@ export abstract class FieldParser {
    */
   protected typeField: string;
 
+  ignorePlaceholderForSimpleFields: boolean;
+
   constructor(
     @Inject(SUBMISSION_ID) protected submissionId: string,
     @Inject(CONFIG_DATA) protected configData: FormFieldModel,
     @Inject(INIT_FORM_VALUES) protected initFormValues: any,
     @Inject(PARSER_OPTIONS) protected parserOptions: ParserOptions,
     protected translate: TranslateService,
   ) {
+    this.ignorePlaceholderForSimpleFields = environment.submission.ignorePlaceholderForSimpleFields;
   }
 
   public abstract modelFactory(fieldValue?: FormFieldMetadataValueObject, label?: boolean): any;
@@ -311,7 +314,7 @@ export abstract class FieldParser {
     if (hint) {
       controlModel.hint = this.configData.hints || '&nbsp;';
     }
-    if (!environment.submission.hidePlaceholderForBasicFields) {
+    if (!this.ignorePlaceholderForSimpleFields) {
       controlModel.placeholder = this.configData.label;
     }
 

src/config/default-app-config.ts

@@ -250,7 +250,7 @@ export class DefaultAppConfig implements AppConfig {
         ],
       },
     },
-    hidePlaceholderForBasicFields: true
+    ignorePlaceholderForSimpleFields: 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;
-  hidePlaceholderForBasicFields?: boolean;
+  ignorePlaceholderForSimpleFields?: boolean;
 }

src/environments/environment.test.ts

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