Ensuring that the message “There were no items to show” is announced to the screen reader when necessary

Author: Andrea-Guevara

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

@@ -28,9 +28,11 @@
 </div>
 <div class="treeview-container">
   <ds-loading *ngIf="loading | async" [showMessage]="false"></ds-loading>
-  <h2 *ngIf="(loading | async) !== true && 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) !== true && 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">