From 3bc5737f6d128d9cfef292986e60135c5f22df1e Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Thu, 24 Jun 2021 17:20:12 +0200
Subject: [PATCH] fix a11y issue with item edit metadata

---
 .../edit-in-place-field/edit-in-place-field.component.html  | 4 ++--
 .../item-metadata/item-metadata.component.html              | 6 +++---
 .../validation-suggestions.component.html                   | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
index cf226f7733..5277fa1a3a 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
+++ b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
@@ -29,7 +29,7 @@
             <span>{{metadata?.value}}</span>
         </div>
         <div *ngIf="(editable | async)" class="field-container">
-            <textarea class="form-control" type="textarea" [(ngModel)]="metadata.value" [dsDebounce]
+            <textarea class="form-control" type="textarea" attr.aria-labelledby="fieldValue" [(ngModel)]="metadata.value" [dsDebounce]
                       (onDebounce)="update()"></textarea>
         </div>
     </div>
@@ -40,7 +40,7 @@
             <span>{{metadata?.language}}</span>
         </div>
         <div *ngIf="(editable | async)" class="field-container">
-            <input class="form-control" type="text" [(ngModel)]="metadata.language" [dsDebounce]
+            <input class="form-control" type="text" attr.aria-labelledby="fieldLang" [(ngModel)]="metadata.language" [dsDebounce]
                    (onDebounce)="update()"/>
         </div>
     </div>
diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html
index 008708d3fb..e154487402 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html
@@ -25,9 +25,9 @@
     <table class="table table-responsive table-striped table-bordered" *ngIf="((updates$ | async)| dsObjectValues).length > 0">
         <tbody>
         <tr>
-            <th>{{'item.edit.metadata.headers.field' | translate}}</th>
-            <th>{{'item.edit.metadata.headers.value' | translate}}</th>
-            <th class="text-center">{{'item.edit.metadata.headers.language' | translate}}</th>
+            <th><span id="fieldName">{{'item.edit.metadata.headers.field' | translate}}</span></th>
+            <th><span id="fieldValue">{{'item.edit.metadata.headers.value' | translate}}</span></th>
+            <th class="text-center"><span id="fieldLang">{{'item.edit.metadata.headers.language' | translate}}</span></th>
             <th class="text-center">{{'item.edit.metadata.headers.edit' | translate}}</th>
         </tr>
         <tr *ngFor="let updateValue of ((updates$ | async)| dsObjectValues); trackBy: trackUpdate"
diff --git a/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html b/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html
index 91d8217ade..f756169f94 100644
--- a/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html
+++ b/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html
@@ -3,7 +3,7 @@
       (keydown.arrowdown)="shiftFocusDown($event)"
       (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
       (dsClickOutside)="checkIfValidInput(form);close();">
-  <input #inputField type="text" formControlName="metadataNameField" [(ngModel)]="value" id="name" [name]="name"
+  <input #inputField type="text" formControlName="metadataNameField" attr.aria-labelledby="fieldName" [(ngModel)]="value" id="name" [name]="name"
          class="form-control suggestion_input"
          [ngClass]="{'is-invalid': !valid}"
          [dsDebounce]="debounceTime" (onDebounce)="find($event)"