[ACS-10238] Fixed screen reading for search clear input and save search close dialog icons (#4836)

projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html

@@ -24,11 +24,16 @@
       [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
       autocomplete="off"
     />
-    
+
     <div matSuffix>
-      <button mat-icon-button (click)="clear()">
+      <button
+        mat-icon-button
+        (click)="clear()"
+        [attr.aria-label]="'COMMON.CLEAR' | translate"
+        [attr.title]="'COMMON.CLEAR' | translate"
+        class="app-search-input-control-clear-button">
         <mat-icon *ngIf="searchFieldFormControl.value.length" class="app-suffix-icon">clear</mat-icon>
       </button>
     </div>
   </mat-form-field>
-</div>
+</div>

projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss

@@ -29,5 +29,9 @@ $search-height: 64px;
     &-input {
       letter-spacing: -0.7px;
     }
+
+    .app-search-input-control-clear-button {
+      margin-right: 1.5px;
+    }
   }
 }

projects/aca-content/src/lib/components/search/search-input/search-input.component.html

@@ -20,7 +20,12 @@
     <div matSuffix>
       <mat-icon class="app-suffix-icon">arrow_drop_down</mat-icon>
 
-      <button class="aca-search-input--close-button" mat-icon-button [attr.aria-label]="'SEARCH.CLOSE_BUTTON.ARIA_LABEL' | translate" (click)="exitSearch()">
+      <button
+        class="aca-search-input--close-button"
+        mat-icon-button
+        [attr.aria-label]="'SEARCH.CLOSE_BUTTON.ARIA_LABEL' | translate"
+        [attr.title]="'SEARCH.CLOSE_BUTTON.ARIA_LABEL' | translate"
+        (click)="exitSearch()">
         <mat-icon class="app-suffix-icon">close</mat-icon>
       </button>
     </div>

projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.html

@@ -1,6 +1,12 @@
 <div class="aca-save-search-dialog__header">
     <h2 class="aca-save-search-dialog__title">{{"APP.BROWSE.SEARCH.SAVE_SEARCH.MODAL_HEADER" | translate}}</h2>
-    <button mat-icon-button mat-dialog-close><mat-icon>close</mat-icon></button>
+    <button
+      mat-icon-button
+      mat-dialog-close
+      [attr.aria-label]="'CLOSE' | translate | titlecase"
+      [attr.title]="'CLOSE' | translate | titlecase">
+      <mat-icon>close</mat-icon>
+    </button>
 </div>