From 9565f9b9ee96b763ea22c39a0faf4e49cdab84ae Mon Sep 17 00:00:00 2001
From: andreaNeki <andrea.montoya@neki-it.com.br>
Date: Fri, 27 Sep 2024 13:44:31 -0300
Subject: [PATCH 1/4] Adding the aria-label attribute to buttons

---
 .../vocabulary-treeview.component.html         | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
index 758d1426e06..6a4d9ea87da 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
@@ -6,16 +6,20 @@
              [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 *ngIf="showAdd && this.vocabularyOptions.closed" class="btn btn-outline-primary" type="button" (click)="add()">
+        <button *ngIf="showAdd && this.vocabularyOptions.closed" class="btn btn-outline-primary" type="button" (click)="add()"
+                [attr.aria-label]="'vocabulary-treeview.search.form.add' | translate">
           {{'vocabulary-treeview.search.form.add' | 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>
@@ -91,13 +95,15 @@ <h2 *ngIf="(loading | async) !== true && dataSource.data.length === 0" class="h4
     </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>

From e54b1ce274febd27e6a3c47bfa14e8be82eb5d8e Mon Sep 17 00:00:00 2001
From: andreaNeki <andrea.montoya@neki-it.com.br>
Date: Fri, 27 Sep 2024 14:01:44 -0300
Subject: [PATCH 2/4] Adding focus to the input after the reset button is
 clicked

---
 .../vocabulary-treeview.component.html                    | 2 +-
 .../vocabulary-treeview/vocabulary-treeview.component.ts  | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
index 6a4d9ea87da..782eb24be4e 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
@@ -2,7 +2,7 @@
 <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">
diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
index cd836a4a473..8ed1c769e5a 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
@@ -8,6 +8,7 @@ import {
 } from '@angular/common';
 import {
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnChanges,
@@ -15,6 +16,7 @@ import {
   OnInit,
   Output,
   SimpleChanges,
+  ViewChild,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
@@ -70,6 +72,11 @@ export type VocabularyTreeItemType = FormFieldMetadataValueObject | VocabularyEn
 })
 export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges {
 
+  /**
+   * Implemented to manage focus on input
+   */
+  @ViewChild('searchInput') searchInput: ElementRef;
+
   /**
    * The {@link VocabularyOptions} object
    */
@@ -332,6 +339,7 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
       this.storedNodeMap = new Map<string, TreeviewFlatNode>();
       this.vocabularyTreeviewService.restoreNodes();
     }
+    this.searchInput.nativeElement.focus();
   }
 
   add() {

From 3658ad1ec09ce6a314dad7e8c5339c2a18cff6e4 Mon Sep 17 00:00:00 2001
From: andreaNeki <andrea.montoya@neki-it.com.br>
Date: Fri, 27 Sep 2024 15:08:53 -0300
Subject: [PATCH 3/4] =?UTF-8?q?Ensuring=20that=20the=20message=20=E2=80=9C?=
 =?UTF-8?q?There=20were=20no=20items=20to=20show=E2=80=9D=20is=20announced?=
 =?UTF-8?q?=20to=20the=20screen=20reader=20when=20necessary?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vocabulary-treeview.component.html                    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
index 782eb24be4e..f55f26aa685 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
+++ b/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">

From 73d39abfe562a3ecd8b6e4ed20e8744a177ea1de Mon Sep 17 00:00:00 2001
From: andreaNeki <andrea.montoya@neki-it.com.br>
Date: Fri, 27 Sep 2024 16:18:56 -0300
Subject: [PATCH 4/4] Trying to correct an error in the focus implementation

---
 .../vocabulary-treeview/vocabulary-treeview.component.ts    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
index 8ed1c769e5a..89d908ec7f7 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
@@ -75,7 +75,7 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
   /**
    * Implemented to manage focus on input
    */
-  @ViewChild('searchInput') searchInput: ElementRef;
+  @ViewChild('searchInput') searchInput!: ElementRef;
 
   /**
    * The {@link VocabularyOptions} object
@@ -339,7 +339,9 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
       this.storedNodeMap = new Map<string, TreeviewFlatNode>();
       this.vocabularyTreeviewService.restoreNodes();
     }
-    this.searchInput.nativeElement.focus();
+    if (this.searchInput) {
+      this.searchInput.nativeElement.focus();
+    }
   }
 
   add() {