Use details for facet fields

app/assets/stylesheets/blacklight/_bootstrap_overrides.scss

@@ -2,30 +2,6 @@
   @extend .py-2;
 }
 
-// Facet field headings and buttons
-.facet-field-heading {
-  border-bottom: 0;
-
-  button {
-    font-weight: $headings-font-weight;
-
-    &::after {
-      content: "❯";
-      float: right;
-      transform: rotate(90deg);
-    }
-
-    &.collapsed {
-      border-bottom: 0;
-
-      &::after {
-        transform: rotate(0deg);
-        transition: transform 0.1s ease;
-      }
-    }
-  }
-}
-
 .page-link {
   white-space: nowrap;
 }

app/assets/stylesheets/blacklight/_facets.scss

@@ -78,6 +78,7 @@
 
   .card-body {
     padding: $spacer;
+    padding-top: 0;
   }
 }
 
@@ -165,15 +166,41 @@
   }
 }
 
+// Facet field headings and buttons
 .facet-field-heading {
-  @extend .h6;
+  border-bottom: 0;
 
-  a {
-    color: inherit;
+  // This fakes a slight animation when expanding/collapsing the details
+  details & {
+    transition: margin 150ms ease-out;
+  }
+
+  details[open] & {
+    margin-bottom: 10px;
+  }
+
+  // Use our own stylized icon
+  &::-webkit-details-marker,
+  &::marker {
+    content: "";
+    display: none;
   }
 
-  /* This prevents the contained stretch link from covering the panel body */
-  position: relative
+  .field-label {
+    align-items: baseline;
+    display: flex;
+    justify-content: space-between;
+
+    &::after {
+      content: "❯";
+      transform: rotate(0deg);
+
+      details[open] & {
+        transform: rotate(90deg);
+        transition: transform 0.1s ease;
+      }
+    }
+  }
 }
 
 /* Sidenav

app/components/blacklight/facet_field_component.html.erb

@@ -1,28 +1,17 @@
-<div class="card facet-limit blacklight-<%= @facet_field.key %> <%= 'facet-limit-active' if @facet_field.active? %>">
-  <h3 class="card-header p-0 facet-field-heading" id="<%= header_html_id %>">
-    <button
-      type="button"
-      class="btn w-100 d-block btn-block p-2 text-start text-left collapse-toggle <%= "collapsed" if @facet_field.collapsed? %>"
-      data-toggle="collapse"
-      data-bs-toggle="collapse"
-      data-target="#<%= html_id %>"
-      data-bs-target="#<%= html_id %>"
-      aria-expanded="<%= @facet_field.collapsed? ? 'false' : 'true' %>"
-    >
-      <%= label %>
-    </button>
-  </h3>
-  <div id="<%= html_id %>" aria-labelledby="<%= header_html_id %>" class="panel-collapse facet-content collapse <%= "show" unless @facet_field.collapsed? %>">
-    <div class="card-body">
-      <%= body %>
+<details class="card facet-limit blacklight-<%= @facet_field.key %> <%= 'facet-limit-active' if @facet_field.active? %>" <%= "open" unless @facet_field.collapsed? %>>
+  <summary class="card-header facet-field-heading px-2" id="<%= header_html_id %>">
+    <span class="field-label py-1"><%= label %></span>
+  </summary>
 
-      <% if @facet_field.modal_path %>
-        <div class="more_facets">
-          <%= link_to t("more_#{@facet_field.key}_html", scope: 'blacklight.search.facets', default: :more_html, field_name: @facet_field.label),
-            @facet_field.modal_path,
-            data: { blacklight_modal: 'trigger', turbo: false } %>
-        </div>
-      <% end %>
-    </div>
+  <div id="<%= html_id %>" class="card-body">
+    <%= body %>
+
+    <% if @facet_field.modal_path %>
+      <div class="more_facets">
+        <%= link_to t("more_#{@facet_field.key}_html", scope: 'blacklight.search.facets', default: :more_html, field_name: @facet_field.label),
+          @facet_field.modal_path,
+          data: { blacklight_modal: 'trigger', turbo: false } %>
+      </div>
+    <% end %>
   </div>
-</div>
+</details>

app/javascript/blacklight/index.js

@@ -1,12 +1,10 @@
 import BookmarkToggle from 'blacklight/bookmark_toggle'
-import ButtonFocus from 'blacklight/button_focus'
 import Modal from 'blacklight/modal'
 import SearchContext from 'blacklight/search_context'
 import Core from 'blacklight/core'
 
 export default {
   BookmarkToggle,
-  ButtonFocus,
   Modal,
   SearchContext,
   Core,

spec/components/blacklight/advanced_search_form_component_spec.rb

@@ -19,6 +19,7 @@
 
   before do
     allow(view_context).to receive(:facet_limit_for).and_return(nil)
+    view_context.blacklight_config.facet_fields['format'].collapse = false
   end
 
   context 'with additional parameters' do

spec/components/blacklight/facet_component_spec.rb

@@ -15,7 +15,7 @@
     instance_double(Blacklight::Solr::Response::Facets::FacetField, name: 'field', items: items, limit: nil, sort: :index, offset: 0, prefix: nil)
   end
 
-  let(:facet_config) { Blacklight::Configuration::FacetField.new(key: 'field').normalize! }
+  let(:facet_config) { Blacklight::Configuration::FacetField.new(key: 'field', collapse: false).normalize! }
 
   it 'delegates to the configured component to render something' do
     expect(rendered).to have_selector 'ul.facet-values'

spec/components/blacklight/facet_field_checkboxes_component_spec.rb

@@ -33,10 +33,8 @@
   let(:params) { { f: { field: ['a'] } } }
 
   it 'renders a collapsible card' do
-    expect(rendered).to have_selector '.card'
-    expect(rendered).to have_button 'Field'
-    expect(rendered).to have_selector 'button[data-bs-target="#facet-field"]'
-    expect(rendered).to have_selector '#facet-field.collapse.show'
+    expect(rendered).to have_selector 'details.card'
+    expect(rendered).to have_selector 'summary', text: 'Field'
   end
 
   it 'renders the facet items' do

spec/components/blacklight/facet_field_list_component_spec.rb

@@ -31,10 +31,8 @@
   end
 
   it 'renders a collapsible card' do
-    expect(rendered).to have_selector '.card'
-    expect(rendered).to have_button 'Field'
-    expect(rendered).to have_selector 'button[data-bs-target="#facet-field"]'
-    expect(rendered).to have_selector '#facet-field.collapse.show'
+    expect(rendered).to have_selector 'details.card[open]'
+    expect(rendered).to have_selector 'summary', text: 'Field'
   end
 
   it 'renders the facet items' do
@@ -58,7 +56,7 @@
     end
 
     it 'adds the facet-limit-active class' do
-      expect(rendered).to have_selector 'div.facet-limit-active'
+      expect(rendered).to have_selector '.facet-limit-active'
     end
   end
 
@@ -78,13 +76,8 @@
     end
 
     it 'renders a collapsed facet' do
-      expect(rendered).to have_selector '.facet-content.collapse'
-      expect(rendered).not_to have_selector '.facet-content.collapse.show'
-    end
-
-    it 'renders the toggle button in the collapsed state' do
-      expect(rendered).to have_selector '.btn.collapsed'
-      expect(rendered).to have_selector '.btn[aria-expanded="false"]'
+      expect(rendered).to have_selector 'details'
+      expect(rendered).not_to have_selector 'details[open]'
     end
   end
 

spec/features/axe_spec.rb

@@ -14,7 +14,7 @@
     expect(page).to be_accessible
 
     within '.card.blacklight-language_ssim' do
-      click_button 'Language'
+      page.find('summary', text: 'Language').click
       click_link "Tibetan"
     end
 

spec/features/facet_missing_spec.rb

@@ -12,7 +12,7 @@
   context "selecting missing field in facets" do
     it "adds facet missing query and constraints" do
       visit root_path
-
+      page.find('summary', text: 'Region').click
       within "#facet-subject_geo_ssim" do
         click_link "[Missing]"
       end
@@ -35,6 +35,7 @@
     it "unselects the missing field facet" do
       visit root_path
 
+      page.find('summary', text: 'Region').click
       within "#facet-subject_geo_ssim" do
         click_link "[Missing]"
       end
@@ -52,6 +53,7 @@
     it "unselects the missing field facet" do
       visit root_path
 
+      page.find('summary', text: 'Region').click
       within "#facet-subject_geo_ssim" do
         click_link "[Missing]"
       end

spec/features/facets_spec.rb

@@ -56,17 +56,17 @@
 
     expect(page).to have_css('#facet-format', visible: false)
 
-    page.find('h3.facet-field-heading button', text: 'Format').click
+    page.find('.facet-field-heading', text: 'Format').click
 
     sleep(1) # let facet animation finish and wait for it to potentially re-collapse
-
+puts page.body
     expect(page).to have_css('#facet-format', visible: true) # assert that it didn't re-collapse
   end
 
   it 'is able to expand pivot facets when javascript is enabled', js: true do
     visit root_path
 
-    page.find('h3.facet-field-heading button', text: 'Pivot Field').click
+    page.find('.facet-field-heading', text: 'Pivot Field').click
 
     within '#facet-example_pivot_field' do
       expect(page).to have_css('.facet-leaf-node', text: "Book 30", normalize_ws: true)
@@ -79,19 +79,10 @@
     expect(page).to have_css('.constraint-value', text: 'Language Tibetan')
   end
 
-  describe 'heading button focus with Firefox' do
-    it 'changes to the button on button click in Firefox' do
-      pending 'Capybara::NotSupportedByDriverError: Capybara::Driver::Base#evaluate_script'
-      visit root_path
-      page.find('h3.facet-field-heading button', text: 'Format').click
-      focused_element_data_target = page.evaluate_script("document.activeElement")['data-bs-target']
-      expect(focused_element_data_target).to eq '#facet-format'
-    end
-  end
-
   describe '"More" links' do
     it 'has default more link with visually-hidden text' do
       visit root_path
+      page.find('.facet-field-heading', text: 'Language').click
       within '#facet-language_ssim' do
         expect(page).to have_css 'div.more_facets', text: 'more Language'
       end