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

@@ -24,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">