From 66b5ca90dc6396a86b7ece9c14184a614323e911 Mon Sep 17 00:00:00 2001
From: MichalKinas <113341662+MichalKinas@users.noreply.github.com>
Date: Tue, 6 Jun 2023 21:29:22 +0200
Subject: [PATCH] [ACS-5342] Accessibility fixes for filters and facets (#8626)

---
 .../search-facet-chip.component.html           |  1 +
 .../search-filter-menu-card.component.html     | 18 ++++++++++--------
 .../search-filter-menu-card.component.scss     |  5 +++--
 .../search-widget-chip.component.html          |  1 +
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
index 1420a5a8fe..64a2fdbc5f 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
@@ -25,6 +25,7 @@
     <div #menuContainer [attr.data-automation-id]="'search-field-' + field.label">
         <adf-search-filter-menu-card (click)="$event.stopPropagation()"
                                      (keydown.tab)="$event.stopPropagation();"
+                                     (keydown.shift.tab)="$event.stopPropagation()"
                                      (close)="menuTrigger.closeMenu()">
             <ng-container ngProjectAs="filter-title">
                 {{ field.label | translate }}
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html
index dba4c3dac0..99454f4ae6 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html
@@ -1,14 +1,16 @@
 <div class="adf-search-filter-menu-card">
     <div class="adf-search-filter-title">
         <ng-content select="filter-title"></ng-content>
-        <mat-icon class="adf-search-filter-title-action"
-                  role="button"
-                  aria-hidden="false"
-                  [attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate"
-                  (click)="onClose()"
-                  [matTooltip]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
-            close
-        </mat-icon>
+        <button mat-icon-button
+            class="adf-search-filter-title-action"
+            aria-hidden="false"
+            [attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate"
+            (click)="onClose()"
+            [matTooltip]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
+            <mat-icon>
+                close
+            </mat-icon>
+        </button>
     </div>
 
     <mat-divider></mat-divider>
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss
index 50925e6086..f61b3a202d 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss
@@ -3,12 +3,13 @@
     background: var(--adf-theme-background-card-color);
 
     .adf-search-filter-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
         padding: 16px 12px;
         height: 32px;
-        flex: 1 1 auto;
         font-size: var(--theme-body-1-font-size);
         letter-spacing: 0.15px;
-        line-height: 24px;
         font-weight: bold;
         font-style: inherit;
 
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
index 0e0dda9a42..c122105f7c 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
@@ -23,6 +23,7 @@
     <div #menuContainer [attr.data-automation-id]="'search-field-' + category.name">
         <adf-search-filter-menu-card (click)="$event.stopPropagation()"
                                      (keydown.tab)="$event.stopPropagation();"
+                                     (keydown.shift.tab)="$event.stopPropagation()"
                                      (close)="menuTrigger.closeMenu()">
 
             <ng-container ngProjectAs="filter-title">