Merge pull request #3481 from projectblacklight/backport-facet-focus-ring

[backport 8.x] accessibility fix: facet focus ring styles

Author: jcoyne

app/assets/stylesheets/blacklight/_facets.scss

@@ -14,18 +14,7 @@
   --bl-facets-smallish-margin-bottom: #{$spacer};
   --bl-facets-smallish-border-radius: #{$border-radius};
 
-  .navbar-toggler {
-    --bs-navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
-    --bs-navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
-    --bs-navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-    --bs-navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
-    color: $navbar-light-active-color;
-
-    &:hover,
-    &:focus {
-      color: $navbar-light-active-color;
-    }
-
+  .facet-toggle-button {
     [data-hide-label] {
       display: inline;
     }
@@ -114,6 +103,16 @@
   .card-body {
     padding: var(--bl-facet-limit-body-padding);
   }
+
+  /* Provide a focus ring on the expand/collapse button */
+  .btn {
+    --bs-btn-focus-shadow-rgb: 50, 50, 50;
+    &:focus-visible {
+      border-color: var(--bs-btn-hover-border-color);
+      outline: 0;
+      box-shadow: var(--bs-btn-focus-box-shadow);
+    }
+  }
 }
 
 .facet-limit-active {

app/components/blacklight/response/facet_group_component.html.erb

@@ -4,7 +4,7 @@
     <%= content_tag :h2, @title, class: 'facets-heading' if @title %>
 
     <%= content_tag :button,
-      class:'navbar-toggler navbar-toggler-right',
+      class: 'btn btn-outline-secondary facet-toggle-button d-block d-lg-none',
       type: 'button',
       data: {
         toggle: 'collapse',