From 0a143941132cb130b51de1123003b0b715e85901 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Fri, 19 May 2023 12:36:28 +1000
Subject: [PATCH] Allow filter header to be tabbable (#3739)

---
 .../src/components/List/EditFilterDialog.tsx  |  2 +-
 ui/v2.5/src/components/List/styles.scss       | 19 ++++++++++++++++---
 ui/v2.5/src/styles/_theme.scss                |  1 +
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/ui/v2.5/src/components/List/EditFilterDialog.tsx b/ui/v2.5/src/components/List/EditFilterDialog.tsx
index 8a41b4a2d..4443ad805 100644
--- a/ui/v2.5/src/components/List/EditFilterDialog.tsx
+++ b/ui/v2.5/src/components/List/EditFilterDialog.tsx
@@ -130,7 +130,7 @@ const CriterionOptionList: React.FC<ICriterionList> = ({
   function renderCard(c: CriterionOption, isPin: boolean) {
     return (
       <Card key={c.type} data-type={c.type} ref={criteriaRefs[c.type]!}>
-        <Accordion.Toggle eventKey={c.type} as={Card.Header}>
+        <Accordion.Toggle className="filter-item-header" eventKey={c.type}>
           <span className="mr-auto">
             <Icon
               className="collapse-icon fa-fw"
diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss
index 38b61606c..cec9da69e 100644
--- a/ui/v2.5/src/components/List/styles.scss
+++ b/ui/v2.5/src/components/List/styles.scss
@@ -108,7 +108,7 @@ input[type="range"].zoom-slider {
   }
 }
 
-.add-filter-dialog .rating-stars {
+.edit-filter-dialog .rating-stars {
   font-size: 1.3em;
   margin-left: 0.25em;
 }
@@ -148,13 +148,26 @@ input[type="range"].zoom-slider {
         margin-left: 0;
       }
 
-      .card-header {
+      .filter-item-header {
+        background-color: $card-cap-bg;
+        border: none;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+        color: inherit;
         cursor: pointer;
         display: flex;
+        margin-bottom: 0;
+        padding: 0.75rem 1.25rem;
+
+        &:focus {
+          border-color: $primary;
+          border-radius: calc(0.375rem - 1px);
+          box-shadow: inset 0 0 0 0.1rem rgba(19, 124, 189);
+          outline: 0;
+        }
       }
     }
 
-    .card-header .btn {
+    .filter-item-header .btn {
       border: 0;
       padding-bottom: 0;
       padding-top: 0;
diff --git a/ui/v2.5/src/styles/_theme.scss b/ui/v2.5/src/styles/_theme.scss
index e680335e2..69380c360 100644
--- a/ui/v2.5/src/styles/_theme.scss
+++ b/ui/v2.5/src/styles/_theme.scss
@@ -26,6 +26,7 @@ $popover-bg: $secondary;
 $dark-text: #182026;
 $textfield-bg: rgba(16, 22, 26, 0.3);
 $card-bg: #30404d;
+$card-cap-bg: rgba(#000, 0.03);
 
 @import "node_modules/bootstrap/scss/bootstrap";