From ce1ba495e30fe96ac3b3bb3db7bcd5632e7ff0b4 Mon Sep 17 00:00:00 2001
From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com>
Date: Thu, 9 Oct 2025 12:47:20 +0200
Subject: [PATCH] [ACS-10238] Fixed screen reading for search clear input and
 save search close dialog icons (#4836)

---
 .../search-input-control.component.html               | 11 ++++++++---
 .../search-input-control.component.scss               |  4 ++++
 .../search/search-input/search-input.component.html   |  7 ++++++-
 .../dialog/save-search-dialog.component.html          |  8 +++++++-
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html b/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
index 168c01dee..399ef4093 100644
--- a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss b/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss
index eb1143494..2b70f289d 100644
--- a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss
+++ b/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;
+    }
   }
 }
diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.html b/projects/aca-content/src/lib/components/search/search-input/search-input.component.html
index 5f4db0969..78622189f 100644
--- a/projects/aca-content/src/lib/components/search/search-input/search-input.component.html
+++ b/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>
diff --git a/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.html b/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.html
index 426614d56..a19a5e803 100644
--- a/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.html
+++ b/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>