[DSC-1864] porting of Fixed browse by vocabulary treeview accessibility issues

Author: atarix83

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html

@@ -1,21 +1,20 @@
-<ds-alert *ngIf="description" [content]="description" [type]="'alert-info'"></ds-alert>
-<div class="treeview-header row mb-1">
-  <div class="col-12">
+<ds-alert *ngIf="description" [content]="description" [type]="AlertType.Info"></ds-alert>
+<div class="treeview-header row">
+  <div class="col-12 d-flex">
     <div class="input-group">
-      <input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()"
-             [placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
+      <input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()">
       <div class="input-group-append" id="button-addon4">
-        <button class="btn btn-outline-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()">
-          {{'vocabulary-treeview.search.form.search' | translate}}
-        </button>
-        <button class="btn btn-outline-secondary" type="button" (click)="reset()">
-          {{'vocabulary-treeview.search.form.reset' | translate}}
-        </button>
-        <button class="btn btn-outline-primary" type="button" (click)="add()" [disabled]="this.vocabularyOptions.closed">
-          {{'vocabulary-treeview.search.form.add' | translate}}
+        <button class="btn btn-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()">
+          <span><i class="fas fa-search"></i> {{'vocabulary-treeview.search.form.search' | translate}}</span>
         </button>
       </div>
     </div>
+    <button class="btn btn-secondary ml-3 flex-shrink-0" type="button" (click)="reset()">
+      <span><i class="fas fa-eraser"></i> {{'vocabulary-treeview.search.form.reset' | translate}}</span>
+    </button>
+    <button *ngIf="showAdd && !this.vocabularyOptions.closed" class="btn btn-secondary ml-3 flex-shrink-0" type="button" (click)="add()">
+        <span><i class="fas fa-plus"></i> {{'vocabulary-treeview.search.form.add' | translate}}</span>
+    </button>
   </div>
 </div>
 <div class="treeview-container">
@@ -59,7 +58,7 @@ <h2 *ngIf="!(loading | async) && dataSource.data.length === 0" class="h4 text-ce
         <button type="button" class="btn btn-default px-2 mr-1" cdkTreeNodeToggle
                 [attr.aria-label]="'toggle ' + node.name"
                 (click)="loadChildren(node)">
-          <i class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"></i>
+          <span class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"></span>
         </button>
 
           <label *ngIf="multiSelect" class="d-flex align-items-center m-0 p-0 form-check"

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts

@@ -15,6 +15,7 @@ import { VocabularyTreeFlattener } from './vocabulary-tree-flattener';
 import { VocabularyTreeFlatDataSource } from './vocabulary-tree-flat-data-source';
 import { VocabularyService } from '../../../core/submission/vocabularies/vocabulary.service';
 import { FormFieldMetadataValueObject } from '../builder/models/form-field-metadata-value.model';
+import { AlertType } from '../../alert/alert-type';
 
 export type VocabularyTreeItemType = FormFieldMetadataValueObject | VocabularyEntry | VocabularyEntryDetail;
 
@@ -110,6 +111,8 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
    */
   private subs: Subscription[] = [];
 
+  readonly AlertType = AlertType;
+
   /**
    * Initialize instance variables
    *