refs #22646 [finc] Corrects reset filters focus tabbing

* removes styles from containing element
* sets styles for anchor contained within
* Reset filters: unsets focus on outer elements, clarifies dropdown
* active filters revision
* streamlines scss

themes/finc/scss/_customVariables.scss

@@ -853,7 +853,7 @@ $search-filters-margin-bottom: 4px !default;
 $search-filters-padding: .5rem 5px !default;
 
 
-$search-filter-remove-button-vertical-align: top !default;
+$search-filter-remove-button-vertical-align: middle !default;
 $search-filter-remove-button-text-display: inline-block !default;
 $search-filter-remove-button-text-max-width: 200px !default;
 $search-filter-remove-button-text-overflow: hidden !default;
@@ -861,7 +861,9 @@ $search-filter-remove-button-text-text-overflow: ellipsis !default;
 $search-filter-remove-button-text-white-space: nowrap !default;
 
 $search-filter-remove-icon: '\f00d' !default;
+$search-filter-remove-icon-display: inline-block !default;
 $search-filter-remove-icon-hover-color: $red !default;
+$search-filter-remove-icon-top-margin: -2px !default;
 $search-filter-remove-icon-vertical-align: top !default;
 $search-filter-remove-icon-in-dropdown-distance-from-right: 1rem !default;
 $search-filter-remove-icon-in-dropdown-padding: 0 !default;

themes/finc/scss/components/_header-active-filters.scss

@@ -16,8 +16,8 @@
 
 // set general text decoration on filters
 .filters {
-  & button,
-  & a {
+  button,
+  a {
     text-decoration: $search-filter-text-decoration;
   }
 }
@@ -31,24 +31,43 @@
   // Outer container for all individual filters
   .filters {
     padding-left: $active-filters-outer-filters-container-padding-left;
-  }
 
-  // Individual filters' outer container
-  // Make this the same height as .reset-filters-btn and other navigation elements
-  // for better usability - keep '.filters' for specifity (overwriting BS3)
-  .filters .filter-value {
-    // the background filter value in BS3 is '$list-group-active-bg'
-    background: $search-filter-values-remove-bg;
-    height: $navigation-element-default-height;
-    margin-bottom: $search-filters-margin-bottom;
-    padding: $search-filters-padding;
-
-    &:focus,
-    &:hover {
-      background: $search-filter-remove-hover-bg;
-      color: $search-filter-remove-hover-color;
+    // Individual filters' outer container
+    // Make this the same height as .reset-filters-btn and other navigation elements
+    // for better usability - keep '.filters' for specifity (overwriting BS3)
+
+    // unset BS values for proper focus highlighting of contained anchor
+    .filter-value {
+      background: transparent;
+      margin: 0;
+      padding: 0;
+
+
+      // define styles for contained anchor
+      a {
+        // the background filter value in BS3 is '$list-group-active-bg'
+        background: $search-filter-values-remove-bg;
+        display: inline-block;
+        height: $navigation-element-default-height;
+        margin-bottom: $search-filters-margin-bottom;
+        padding: $search-filters-padding;
+        vertical-align: $search-filter-remove-button-vertical-align;
+
+        &:focus,
+        &:hover {
+          background: $search-filter-remove-hover-bg;
+          color: $search-filter-remove-hover-color;
+          // overwrite outline-offset ('a:focus')
+          outline-offset: 0;
+        }
+      }
     }
   }
+
+  // keep '.search-filter-dropdown' for specifity to overwrite BS
+  .search-filter-dropdown .dropdown-menu .filter-value a {
+    width: 100%;
+  }
 }
 
 
@@ -65,16 +84,13 @@
 }
 
 
-// Set focus and hover styles for individual filter items'
-// outer container ('.filters .filter-value') and filter items ('.search-filter-remove')
-.filters .filter-value,
-.search-filter-remove {
+// Set focus and hover styles for individual filter items' ('.search-filter-remove')
+.search-filter-remove,
+.search-filter-remove:visited, {
   color: $search-filter-values-remove-color;
 
   &:focus,
-  &:hover,
-  &:visited:focus,
-  &:visited:hover {
+  &:hover {
     // Keep '.active-filters' for specifity to overwrite BS
     .active-filters & {
       background: $search-filter-remove-hover-bg;
@@ -85,20 +101,7 @@
   }
 
 
-  // Make this same color as un-visited item
-  &:visited {
-    // Keep '.active-filters' for specifity to overwrite BS
-    .active-filters & {
-      color: inherit;
-      text-decoration: inherit;
-    }
-  }
-}
-
-// Set color of individual filters when focus is on outer container
-.search-filter-remove,
-.search-filter-remove:visited {
-
+  // Set color of the individual filters when FOCUS is ON OUTER container
   .filters .filter-value:focus &,
   .filters .filter-value:hover & {
     background: $search-filter-remove-hover-bg;
@@ -110,13 +113,9 @@
       color: $search-filter-remove-icon-hover-color;
     }
   }
-}
 
-// This is the colored, button-like element with the 'x' icon
-.search-filter-remove {
-  // Align with text inside the element
-  vertical-align: $search-filter-remove-button-vertical-align;
 
+  // This is the colored, button-like element with the 'x' icon
   .text {
     // Create ellipsis for overlong filter text
     display: $search-filter-remove-button-text-display;
@@ -130,6 +129,8 @@
   // Set icon content
   &::after {
     content: $search-filter-remove-icon;
+    display: $search-filter-remove-icon-display;
+    margin-top: $search-filter-remove-icon-top-margin;
     vertical-align: $search-filter-remove-icon-vertical-align;
 
     // Move 'x' to the right of the buttons in dropdown