From 3ca1e61a8cf144eb1e43a5d38bb0fd341ad80870 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Thu, 24 Jun 2021 11:58:41 +0200
Subject: [PATCH] fix issue with missing labels in the submission form

---
 .../ds-dynamic-form-control-container.component.html           | 3 ++-
 .../dynamic-date-picker-inline.component.html                  | 1 +
 .../ds-dynamic-form-ui/models/list/dynamic-list.component.html | 1 +
 .../models/lookup/dynamic-lookup.component.html                | 2 ++
 .../models/onebox/dynamic-onebox.component.html                | 2 ++
 .../dynamic-scrollable-dropdown.component.html                 | 1 +
 .../ds-dynamic-form-ui/models/tag/dynamic-tag.component.html   | 1 +
 7 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
index bfbd2b4677..2fa3ea1723 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
@@ -2,7 +2,8 @@
      [formGroup]="group"
      [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
     <label *ngIf="!isCheckbox && hasLabel"
-           [for]="model.id"
+           [id]="'label_' + model.id"
+           [for]="id"
            [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
            [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
     <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model"></ng-container>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html
index 103e3aac23..6c44f77be2 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html
@@ -1,6 +1,7 @@
 <div [formGroup]="group" class="input-group">
 
     <input ngbDatepicker class="form-control" #datepicker="ngbDatepicker"
+           [attr.aria-labelledby]="'label_' + model.id"
            [class.is-invalid]="showErrorMessages"
            [displayMonths]="model.getAdditional('displayMonths', config['displayMonths'])"
            [id]="id"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
index fe0d4870d0..bed5c2987e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
@@ -11,6 +11,7 @@
       <div  *ngFor="let item of columnItems" class="custom-control custom-checkbox">
 
           <input type="checkbox" class="custom-control-input"
+                 [attr.aria-labelledby]="'label_' + model.id"
                  [attr.tabindex]="item.index"
                  [checked]="item.value"
                  [id]="item.id"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
index 4c3addd0df..d015a04dae 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
@@ -11,6 +11,7 @@
          [authorityValue]="model.value"
          (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted(sdRef, $event)"></i>
       <input class="form-control"
+             [attr.aria-labelledby]="'label_' + model.id"
              [attr.autoComplete]="model.autoComplete"
              [class.is-invalid]="showErrorMessages"
              [id]="model.id"
@@ -30,6 +31,7 @@
     <div *ngIf="isLookupName()" class="col" >
       <input  class="form-control"
               [ngClass]="{}"
+              [attr.aria-labelledby]="'label_' + model.id"
               [attr.autoComplete]="model.autoComplete"
               [class.is-invalid]="showErrorMessages"
               [id]="id"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
index ece0768a92..6b3c64d59c 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
@@ -30,6 +30,7 @@
      (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted($event)"></i>
   <input #instance="ngbTypeahead"
          class="form-control"
+         [attr.aria-labelledby]="'label_' + model.id"
          [attr.autoComplete]="model.autoComplete"
          [class.is-invalid]="showErrorMessages"
          [id]="model.id"
@@ -52,6 +53,7 @@
 
 <input *ngIf="(isHierarchicalVocabulary() | async)"
        class="form-control custom-select"
+       [attr.aria-labelledby]="'label_' + model.id"
        [attr.autoComplete]="model.autoComplete"
        [class.is-invalid]="showErrorMessages"
        [id]="id"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
index 01ae9b9728..5e8980516f 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
@@ -3,6 +3,7 @@
     <i ngbDropdownToggle class="far fa-caret-down position-absolute scrollable-dropdown-toggle"
        aria-hidden="true"></i>
     <input class="form-control"
+           [attr.aria-labelledby]="'label_' + model.id"
            [attr.autoComplete]="model.autoComplete"
            [class.is-invalid]="showErrorMessages"
            [class.scrollable-dropdown-input]="!model.readOnly"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
index 31419df83e..b4605f2ac4 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
@@ -26,6 +26,7 @@
          class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1"
          type="text"
          role="textbox"
+         [attr.aria-labelledby]="'label_' + model.id"
          [(ngModel)]="currentValue"
          [attr.autoComplete]="model.autoComplete"
          [class.is-invalid]="showErrorMessages"