From 77c002f07f9aef80381f66846e4caa572e1903be Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 10 Jun 2024 11:46:26 +0200
Subject: [PATCH] Fix video filter pastille accessibility

---
 .../video-filters-header.component.html            | 14 ++++++++++----
 .../video-filters-header.component.scss            | 11 ++++++++---
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
index a91aa26c0..b6258fb25 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
@@ -23,8 +23,8 @@
         <my-global-icon iconName="chevrons-up"></my-global-icon>
       </button>
 
-      <button
-        *ngFor="let activeFilter of filters.getActiveFilters()" (click)="resetFilter(activeFilter.key, activeFilter.canRemove)"
+      <div
+        *ngFor="let activeFilter of filters.getActiveFilters()"
         class="active-filter pastille button-unstyle" [ngClass]="{ 'can-remove': activeFilter.canRemove }" [title]="getFilterTitle(activeFilter.canRemove)"
       >
         <span>
@@ -33,8 +33,14 @@
           <ng-container *ngIf="activeFilter.value">: {{ activeFilter.value }}</ng-container>
         </span>
 
-        <my-global-icon *ngIf="activeFilter.canRemove" iconName="cross"></my-global-icon>
-      </button>
+        <button
+          *ngIf="activeFilter.canRemove" type="button" class="remove-button"
+          (click)="resetFilter(activeFilter.key, activeFilter.canRemove)"
+          i18n-title title="Remove this filter"
+        >
+          <my-global-icon iconName="cross"></my-global-icon>
+        </button>
+      </div>
     </div>
 
     <ng-select
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
index c65895a51..d90a80ee2 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
@@ -94,11 +94,16 @@
     opacity: 0.9;
   }
 
-  my-global-icon {
+  > .remove-button {
     @include margin-left(10px);
 
-    width: 16px;
-    color: pvar(--greyForegroundColor);
+    border: 0;
+    padding: 0;
+
+    my-global-icon {
+      width: 16px;
+      color: pvar(--greyForegroundColor);
+    }
   }
 }