Fixed browse by vocabulary treeview accessibility issues

Author: alexandrevryghem

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

@@ -1,8 +1,9 @@
-<ds-alert [content]="'vocabulary-treeview.info' | translate" [type]="'alert-info'"></ds-alert>
-<div class="treeview-header row">
+<ds-alert [content]="'vocabulary-treeview.info' | translate" [type]="AlertType.Info"></ds-alert>
+<div class="treeview-header row mb-1">
   <div class="col-12">
     <div class="input-group">
-      <input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()">
+      <input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()"
+             [placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
       <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}}
@@ -19,15 +20,15 @@
 </div>
 <div class="treeview-container">
   <ds-themed-loading *ngIf="loading | async" [showMessage]="false"></ds-themed-loading>
-  <h4 *ngIf="!(loading | async) && dataSource.data.length === 0" class="text-center text-muted mt-4" >
+  <h2 *ngIf="!(loading | async) && dataSource.data.length === 0" class="h4 text-center text-muted mt-4" >
     <span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
-  </h4>
+  </h2>
   <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
     <!-- Leaf node -->
     <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="d-flex">
-        <button type="button" class="btn btn-default" cdkTreeNodeToggle>
-          <span class="fas fa-fw fa-angle-right invisible" aria-hidden="true"></span>
-        </button>
+      <span aria-hidden="true" type="button" class="btn btn-default px-2 mr-1" cdkTreeNodeToggle>
+        <i class="fas fa-fw fa-angle-right invisible"></i>
+      </span>
           <label *ngIf="multiSelect" class="d-flex align-items-center m-0 p-0 form-check"
                  [class.text-success]="node.isSelected"
                  [ngbTooltip]="node.item?.otherInformation?.note"
@@ -55,11 +56,10 @@ <h4 *ngIf="!(loading | async) && dataSource.data.length === 0" class="text-cente
 
     <!-- expandable node -->
     <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChildren" cdkTreeNodePadding class="d-flex">
-        <button type="button" class="btn btn-default" cdkTreeNodeToggle
+        <button type="button" class="btn btn-default px-2 mr-1" cdkTreeNodeToggle
                 [attr.aria-label]="'toggle ' + node.name"
                 (click)="loadChildren(node)">
-          <span class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"
-                aria-hidden="true"></span>
+          <i class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"></i>
         </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.scss

@@ -2,10 +2,6 @@
   text-align:left;
 }
 
-cdk-tree .btn:focus {
-  box-shadow: none !important;
-}
-
 label {
   cursor: pointer;
 }

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

@@ -17,6 +17,7 @@ import { VocabularyTreeFlatDataSource } from './vocabulary-tree-flat-data-source
 import { CoreState } from '../../../core/core-state.model';
 import { VocabularyService } from '../../../core/submission/vocabularies/vocabulary.service';
 import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
+import { AlertType } from '../../alert/alert-type';
 
 /**
  * Component that shows a hierarchical vocabulary in a tree view
@@ -105,6 +106,8 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
    */
   private subs: Subscription[] = [];
 
+  readonly AlertType = AlertType;
+
   /**
    * Initialize instance variables
    *

src/assets/i18n/en.json5

@@ -4790,6 +4790,8 @@
 
   "vocabulary-treeview.search.form.search": "Search",
 
+  "vocabulary-treeview.search.form.search-placeholder": "Filter results by typing the first few letters",
+
   "vocabulary-treeview.search.no-result": "There were no items to show",
 
   "vocabulary-treeview.tree.description.nsi": "The Norwegian Science Index",