[DURACOM-347] remove property, disable placeholder on date field and concat/series (replace with labels)

Author: FrancescoMolinaro

config/config.example.yml

@@ -237,11 +237,6 @@ 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/
-  omitSimpleFieldPlaceholders:
-
 
 #  Fallback language in which the UI will be rendered if the user's browser language is not an active language
 fallbackLanguage: en

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

@@ -92,18 +92,18 @@ export class ConcatFieldParser extends FieldParser {
     concatGroup.disabled = input1ModelConfig.readOnly;
 
     if (isNotEmpty(this.firstPlaceholder)) {
-      input1ModelConfig.placeholder = this.firstPlaceholder;
+      input1ModelConfig.label = this.firstPlaceholder;
     }
 
     if (isNotEmpty(this.secondPlaceholder)) {
-      input2ModelConfig.placeholder = this.secondPlaceholder;
+      input2ModelConfig.label = this.secondPlaceholder;
     }
 
     // Split placeholder if is like 'placeholder1/placeholder2'
     const placeholder = this.configData.label.split('/');
     if (placeholder.length === 2) {
-      input1ModelConfig.placeholder = placeholder[0];
-      input2ModelConfig.placeholder = placeholder[1];
+      input1ModelConfig.label = placeholder[0];
+      input2ModelConfig.label = placeholder[1];
     }
 
     const model1 = new DsDynamicInputModel(input1ModelConfig, clsInput);

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

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

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

@@ -19,7 +19,6 @@ import {
 import { DynamicFormControlLayout } from '@ng-dynamic-forms/core';
 import { TranslateService } from '@ngx-translate/core';
 import uniqueId from 'lodash/uniqueId';
-import { environment } from 'src/environments/environment';
 
 import {
   DsDynamicInputModel,
@@ -54,16 +53,13 @@ export abstract class FieldParser {
    */
   protected typeField: string;
 
-  omitSimpleFieldPlaceholders: 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.omitSimpleFieldPlaceholders = environment.submission.omitSimpleFieldPlaceholders;
   }
 
   public abstract modelFactory(fieldValue?: FormFieldMetadataValueObject, label?: boolean): any;
@@ -310,11 +306,8 @@ export abstract class FieldParser {
     if (hint) {
       controlModel.hint = this.configData.hints || ' ';
     }
-    if (!this.omitSimpleFieldPlaceholders) {
-      controlModel.placeholder = this.configData.label;
-    } else {
-      controlModel.additional = { ...controlModel.additional, ariaLabel: this.configData.label };
-    }
+
+    controlModel.additional = { ...controlModel.additional, ariaLabel: this.configData.label };
 
     if (this.configData.mandatory && setErrors) {
       this.markAsRequired(controlModel);

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

@@ -26,7 +26,6 @@
         [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"
     >

src/config/default-app-config.ts

@@ -254,7 +254,6 @@ export class DefaultAppConfig implements AppConfig {
         ],
       },
     },
-    omitSimpleFieldPlaceholders: true,
   };
 
   // Fallback 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,4 @@ export interface SubmissionConfig extends Config {
   duplicateDetection: DuplicateDetectionConfig;
   typeBind: TypeBindConfig;
   icons: IconsConfig;
-  omitSimpleFieldPlaceholders?: boolean;
 }

src/environments/environment.test.ts

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