diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss index b56bc2f12..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; } @@ -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 { 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',