From eae89e1be01c600b487f4697ee4494df0e54c810 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Thu, 8 Jul 2021 19:37:39 +0200
Subject: [PATCH] fix issue with missing aria label

---
 .../comcol-form/comcol-form.component.html    |  2 +-
 ...dynamic-scrollable-dropdown.component.html |  6 ++---
 src/app/shared/form/form.component.html       | 27 ++++++++++---------
 ...search-switch-configuration.component.html |  2 +-
 .../section-container.component.html          |  7 +++--
 5 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
index 521ae3f52b..041eaeb128 100644
--- a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
+++ b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
@@ -12,7 +12,7 @@
           <div class="col-4 d-inline-block">
             <div *ngIf="logo" class="btn-group btn-group-sm float-right" role="group">
               <button *ngIf="!markLogoForDeletion" type="button" class="btn btn-danger"
-                      [attr.aria-label]="(type.value + 'edit.logo.delete.title' | translate)"
+                      [attr.aria-label]="(type.value + '.edit.logo.delete.title' | translate)"
                       title="{{type.value + '.edit.logo.delete.title' | translate}}"
                       (click)="deleteLogo()">
                 <i class="fas fa-trash" aria-hidden="true"></i>
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 2b51a16474..0999d2cb1a 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,7 +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.aria-label]="model.placeholder"
            [attr.autoComplete]="model.autoComplete"
            [class.is-invalid]="showErrorMessages"
            [class.scrollable-dropdown-input]="!model.readOnly"
@@ -22,9 +22,9 @@
        class="dropdown-menu scrollable-dropdown-menu w-100"
        aria-haspopup="true"
        aria-expanded="false"
-       [attr.aria-labelledby]="'label_' + model.id">
+       [attr.aria-label]="model.placeholder">
     <div class="scrollable-menu"
-         [attr.aria-labelledby]="'label_' + model.id"
+         [attr.aria-label]="model.placeholder"
          infiniteScroll
          [infiniteScrollDistance]="2"
          [infiniteScrollThrottle]="50"
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html
index 654bd38d8f..16ced852b1 100644
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -17,18 +17,20 @@
              class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
             <button type="button" class="btn btn-secondary" role="button"
                     title="{{'form.remove' | translate}}"
+                    attr.aria-label="{{'form.remove' | translate}}"
                     (click)="removeItem($event, context, index)"
                     [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
-              <span attr.aria-label="{{'form.remove' | translate}}"><i class="fas fa-trash" aria-hidden="true"></i></span>
+              <span><i class="fas fa-trash" aria-hidden="true"></i></span>
             </button>
         </div>
         <div *ngIf="(!context.notRepeatable) && index === (group.context.groups.length - 1)" class="clearfix pl-4 w-100">
           <div class="btn-group" role="group">
             <button type="button" role="button" class="ds-form-add-more btn btn-link"
                     title="{{'form.add' | translate}}"
+                    attr.aria-label="{{'form.add' | translate}}"
                     [disabled]="isItemReadOnly(context, index)"
                     (click)="insertItem($event, group.context, group.context.groups.length)">
-              <span attr.aria-label="{{'form.add' | translate}}"><i class="fas fa-plus"></i> {{'form.add' | translate}}</span>
+              <span><i class="fas fa-plus"></i> {{'form.add' | translate}}</span>
             </button>
           </div>
         </div>
@@ -39,9 +41,10 @@
           <div class="btn-group" role="button">
             <button type="button" class="btn btn-secondary"
                     title="{{'form.discard' | translate}}"
+                    attr.aria-label="{{'form.discard' | translate}}"
                     (click)="removeItem($event, context, index)"
                     [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
-              <span attr.aria-label="{{'form.discard' | translate}}">{{'form.discard' | translate}}</span>
+              <span>{{'form.discard' | translate}}</span>
             </button>
           </div>
         </div>
@@ -55,15 +58,15 @@
       <hr>
       <div class="form-group row">
         <div class="col text-right">
-                    <ng-content select="[before]"></ng-content>
-                    <button *ngIf="displayCancel" type="reset" class="btn btn-outline-secondary" (click)="reset()">
-                      <i class="fa fa-times"></i> {{cancelLabel | translate}}
-          </button>
-                    <ng-content select="[between]"></ng-content>
-                    <button *ngIf="displaySubmit" type="submit" class="btn btn-primary" (click)="onSubmit()"
-                            [disabled]="!(isValid() | async)"><i class="fas fa-save"></i> {{submitLabel | translate}}
-                    </button>
-                    <ng-content select="[after]"></ng-content>
+          <ng-content select="[before]"></ng-content>
+            <button *ngIf="displayCancel" type="reset" class="btn btn-outline-secondary" (click)="reset()">
+              <i class="fa fa-times"></i> {{cancelLabel | translate}}
+            </button>
+            <ng-content select="[between]"></ng-content>
+            <button *ngIf="displaySubmit" type="submit" class="btn btn-primary" (click)="onSubmit()"
+                    [disabled]="!(isValid() | async)"><i class="fas fa-save"></i> {{submitLabel | translate}}
+            </button>
+            <ng-content select="[after]"></ng-content>
         </div>
       </div>
     </div>
diff --git a/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html b/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html
index 50658ade9c..e66483b645 100644
--- a/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html
+++ b/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html
@@ -2,7 +2,7 @@
   <h5 id="configuration-switch">{{ 'search.switch-configuration.title' | translate}}</h5>
 
   <select class="form-control"
-          attr.aria-labelledby="configuration-switch"
+          aria-labelledby="configuration-switch"
           [compareWith]="compare"
           [(ngModel)]="selectedOption"
           (change)="onSelect()">
diff --git a/src/app/submission/sections/container/section-container.component.html b/src/app/submission/sections/container/section-container.component.html
index 3f78b01a63..28ed377c4a 100644
--- a/src/app/submission/sections/container/section-container.component.html
+++ b/src/app/submission/sections/container/section-container.component.html
@@ -22,12 +22,11 @@
              aria-hidden="true" title="{{'submission.sections.status.valid.title' | translate}}"></i>
           <a class="close"
              tabindex="0"
+             role="button"
              [attr.aria-label]="(sectionRef.isOpen() ? 'submission.sections.toggle.close' : 'submission.sections.toggle.open') | translate"
              [title]="(sectionRef.isOpen() ? 'submission.sections.toggle.close' : 'submission.sections.toggle.open') | translate">
-            <span *ngIf="sectionRef.isOpen()" class="fas fa-chevron-up fa-fw"
-                  aria-hidden="true"></span>
-            <span *ngIf="!sectionRef.isOpen()" class="fas fa-chevron-down fa-fw"
-                  aria-hidden="true"></span>
+            <span *ngIf="sectionRef.isOpen()" class="fas fa-chevron-up fa-fw"></span>
+            <span *ngIf="!sectionRef.isOpen()" class="fas fa-chevron-down fa-fw"></span>
           </a>
           <a href="#" class="close mr-3" *ngIf="!sectionRef.isMandatory()"
              (click)="removeSection($event)">