From d961e789b959751a6245fc73e641120643d8a1ea Mon Sep 17 00:00:00 2001
From: Justin Coyne <jcoyne@justincoyne.com>
Date: Mon, 21 Oct 2024 22:53:25 -0500
Subject: [PATCH 1/3] Provide a focus ring on facet open/close button

Fixes #3300
---
 app/assets/stylesheets/blacklight/_facets.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
index b56bc2f12..2d24a936d 100644
--- a/app/assets/stylesheets/blacklight/_facets.scss
+++ b/app/assets/stylesheets/blacklight/_facets.scss
@@ -1,3 +1,4 @@
+/* dood */
 .sidenav {
   --bl-facet-active-bg: #{$facet-active-bg};
   --bl-facet-active-item-color: #{$facet-active-item-color};
@@ -114,6 +115,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 {

From 65d8b9bad0d44464ccb281df943f2ba8be00ccad Mon Sep 17 00:00:00 2001
From: Justin Coyne <jcoyne@justincoyne.com>
Date: Wed, 23 Oct 2024 08:26:12 -0500
Subject: [PATCH 2/3] Remove cruft (#3384)

---
 app/assets/stylesheets/blacklight/_facets.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
index 2d24a936d..d13d3212c 100644
--- a/app/assets/stylesheets/blacklight/_facets.scss
+++ b/app/assets/stylesheets/blacklight/_facets.scss
@@ -1,4 +1,3 @@
-/* dood */
 .sidenav {
   --bl-facet-active-bg: #{$facet-active-bg};
   --bl-facet-active-item-color: #{$facet-active-item-color};

From bed9f790248cdaa91cf6a0917b73a2ee6fa55cae Mon Sep 17 00:00:00 2001
From: Justin Coyne <jcoyne@justincoyne.com>
Date: Fri, 25 Oct 2024 10:05:48 -0500
Subject: [PATCH 3/3] Create a custom css class for the facet toggle button

It's odd to use navbar-toggler for a button that doesn't exist in a .navbar.  This lead us to setting a bunch of properties we wouldn't need to set if we just use a .btn
---
 app/assets/stylesheets/blacklight/_facets.scss      | 13 +------------
 .../response/facet_group_component.html.erb         |  2 +-
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
index d13d3212c..b7b4dffd1 100644
--- a/app/assets/stylesheets/blacklight/_facets.scss
+++ b/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;
     }
diff --git a/app/components/blacklight/response/facet_group_component.html.erb b/app/components/blacklight/response/facet_group_component.html.erb
index 24fd2557f..76f29bf7a 100644
--- a/app/components/blacklight/response/facet_group_component.html.erb
+++ b/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',