Merge pull request #3768 from tdonohue/port_3367_to_7x

[Port dspace-7_x] Accessibility in vocabulary treeview

Author: tdonohue

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

@@ -2,17 +2,20 @@
 <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 #searchInput type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()"
              [attr.aria-label]="'vocabulary-treeview.search.form.search-placeholder' | translate"
              [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()">
+        <button class="btn btn-outline-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()"
+                [attr.aria-label]="'vocabulary-treeview.search.form.search' | translate">
           {{'vocabulary-treeview.search.form.search' | translate}}
         </button>
-        <button class="btn btn-outline-secondary" type="button" (click)="reset()">
+        <button class="btn btn-outline-secondary" type="button" (click)="reset()"
+                [attr.aria-label]="'vocabulary-treeview.search.form.reset' | translate">
           {{'vocabulary-treeview.search.form.reset' | translate}}
         </button>
-        <button class="btn btn-outline-primary" type="button" (click)="add()" [disabled]="this.vocabularyOptions.closed">
+        <button class="btn btn-outline-primary" type="button" (click)="add()" [disabled]="this.vocabularyOptions.closed"
+                [attr.aria-label]="'vocabulary-treeview.search.form.add' | translate">
           {{'vocabulary-treeview.search.form.add' | translate}}
         </button>
       </div>
@@ -21,9 +24,11 @@
 </div>
 <div class="treeview-container">
   <ds-themed-loading *ngIf="loading | async" [showMessage]="false"></ds-themed-loading>
-  <h2 *ngIf="!(loading | async) && dataSource.data.length === 0" class="h4 text-center text-muted mt-4" >
-    <span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
-  </h2>
+  <div aria-live="polite">
+    <h2 *ngIf="!(loading | async) && dataSource.data.length === 0" class="h4 text-center text-muted mt-4" >
+      <span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
+    </h2>
+  </div>
   <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
     <!-- Leaf node -->
     <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="d-flex">
@@ -88,13 +93,15 @@ <h2 *ngIf="!(loading | async) && dataSource.data.length === 0" class="h4 text-ce
     </cdk-tree-node>
 
     <cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMore" cdkTreeNodePadding>
-      <button class="btn btn-outline-secondary btn-sm" (click)="loadMore(node.loadMoreParentItem)">
+      <button class="btn btn-outline-secondary btn-sm" (click)="loadMore(node.loadMoreParentItem)"
+              [attr.aria-label]="'vocabulary-treeview.load-more' | translate">
         {{'vocabulary-treeview.load-more' | translate}}...
       </button>
     </cdk-tree-node>
 
     <cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMoreRoot">
-      <button class="btn btn-outline-secondary btn-sm" (click)="loadMoreRoot(node)">
+      <button class="btn btn-outline-secondary btn-sm" (click)="loadMoreRoot(node)"
+              [attr.aria-label]="'vocabulary-treeview.load-more' | translate">
         {{'vocabulary-treeview.load-more' | translate}}...
       </button>
     </cdk-tree-node>

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

@@ -1,5 +1,5 @@
 import { FlatTreeControl } from '@angular/cdk/tree';
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 
 import { Observable, Subscription } from 'rxjs';
 import { Store } from '@ngrx/store';
@@ -29,6 +29,11 @@ import { AlertType } from '../../alert/alert-type';
 })
 export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges {
 
+  /**
+   * Implemented to manage focus on input
+   */
+  @ViewChild('searchInput') searchInput!: ElementRef;
+
   /**
    * The {@link VocabularyOptions} object
    */
@@ -294,6 +299,9 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
       this.storedNodeMap = new Map<string, TreeviewFlatNode>();
       this.vocabularyTreeviewService.restoreNodes();
     }
+    if (this.searchInput) {
+      this.searchInput.nativeElement.focus();
+    }
   }
 
   add() {