Allow filter header to be tabbable (#3739)

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"

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;

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";