From 206994c69f8448f390815d63b8f7891675670f09 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Mon, 6 Feb 2023 12:05:08 -0800 Subject: [PATCH] Use details for facet fields --- .../blacklight/_bootstrap_overrides.scss | 24 ---------- .../stylesheets/blacklight/_facets.scss | 37 ++++++++++++--- .../blacklight/facet_field_component.html.erb | 41 +++++++---------- app/javascript/blacklight/button_focus.js | 12 ----- app/javascript/blacklight/index.js | 2 - .../advanced_search_form_component_spec.rb | 1 + .../blacklight/facet_component_spec.rb | 2 +- .../facet_field_checkboxes_component_spec.rb | 6 +-- .../facet_field_list_component_spec.rb | 17 +++---- spec/features/axe_spec.rb | 2 +- spec/features/facet_missing_spec.rb | 4 +- spec/features/facets_spec.rb | 7 +-- spec/features/search_filters_spec.rb | 45 ++++++++++++------- spec/features/search_sort_spec.rb | 1 + .../catalog/_facet_layout.html.erb_spec.rb | 14 ++---- 15 files changed, 97 insertions(+), 118 deletions(-) delete mode 100644 app/javascript/blacklight/button_focus.js diff --git a/app/assets/stylesheets/blacklight/_bootstrap_overrides.scss b/app/assets/stylesheets/blacklight/_bootstrap_overrides.scss index 31e9f72495..25708b6073 100644 --- a/app/assets/stylesheets/blacklight/_bootstrap_overrides.scss +++ b/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; } diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss index 49467de993..fa327f84e3 100644 --- a/app/assets/stylesheets/blacklight/_facets.scss +++ b/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 diff --git a/app/components/blacklight/facet_field_component.html.erb b/app/components/blacklight/facet_field_component.html.erb index bca981f5c0..322a0dc68d 100644 --- a/app/components/blacklight/facet_field_component.html.erb +++ b/app/components/blacklight/facet_field_component.html.erb @@ -1,28 +1,17 @@ -
-

- -

-
"> -
- <%= body %> +
> + + <%= label %> + - <% if @facet_field.modal_path %> -
- <%= 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 } %> -
- <% end %> -
+
+ <%= body %> + + <% if @facet_field.modal_path %> +
+ <%= 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 } %> +
+ <% end %>
-
+ diff --git a/app/javascript/blacklight/button_focus.js b/app/javascript/blacklight/button_focus.js deleted file mode 100644 index da0d923ec6..0000000000 --- a/app/javascript/blacklight/button_focus.js +++ /dev/null @@ -1,12 +0,0 @@ -const ButtonFocus = (() => { - document.addEventListener('click', (e) => { - // Button clicks should change focus. As of 10/3/19, Firefox for Mac and - // Safari both do not set focus to a button on button click. - // See https://zellwk.com/blog/inconsistent-button-behavior/ for background information - if (e.target.matches('[data-toggle="collapse"]') || e.target.matches('[data-bs-toggle="collapse"]')) { - e.target.focus() - } - }) -})() - -export default ButtonFocus diff --git a/app/javascript/blacklight/index.js b/app/javascript/blacklight/index.js index 0fe8e22724..b581cba92f 100644 --- a/app/javascript/blacklight/index.js +++ b/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, diff --git a/spec/components/blacklight/advanced_search_form_component_spec.rb b/spec/components/blacklight/advanced_search_form_component_spec.rb index 6a6d261a91..40477e071f 100644 --- a/spec/components/blacklight/advanced_search_form_component_spec.rb +++ b/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 diff --git a/spec/components/blacklight/facet_component_spec.rb b/spec/components/blacklight/facet_component_spec.rb index 5676ae25a5..8444be750f 100644 --- a/spec/components/blacklight/facet_component_spec.rb +++ b/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' diff --git a/spec/components/blacklight/facet_field_checkboxes_component_spec.rb b/spec/components/blacklight/facet_field_checkboxes_component_spec.rb index c1f891289b..32f66e0c5e 100644 --- a/spec/components/blacklight/facet_field_checkboxes_component_spec.rb +++ b/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 diff --git a/spec/components/blacklight/facet_field_list_component_spec.rb b/spec/components/blacklight/facet_field_list_component_spec.rb index 95744b62fa..fd439ba54d 100644 --- a/spec/components/blacklight/facet_field_list_component_spec.rb +++ b/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 diff --git a/spec/features/axe_spec.rb b/spec/features/axe_spec.rb index 102debf60e..baec2b0779 100644 --- a/spec/features/axe_spec.rb +++ b/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 diff --git a/spec/features/facet_missing_spec.rb b/spec/features/facet_missing_spec.rb index ff7c33e03f..2415384e75 100644 --- a/spec/features/facet_missing_spec.rb +++ b/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 diff --git a/spec/features/facets_spec.rb b/spec/features/facets_spec.rb index 842fd71cbf..1ba5d80635 100644 --- a/spec/features/facets_spec.rb +++ b/spec/features/facets_spec.rb @@ -56,7 +56,7 @@ 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 @@ -66,7 +66,7 @@ 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) @@ -83,7 +83,7 @@ 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 + page.find('.facet-field-heading', 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 @@ -92,6 +92,7 @@ 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 diff --git a/spec/features/search_filters_spec.rb b/spec/features/search_filters_spec.rb index 2d251e3a36..55d65c578f 100644 --- a/spec/features/search_filters_spec.rb +++ b/spec/features/search_filters_spec.rb @@ -3,6 +3,7 @@ RSpec.describe "Facets" do it "works without a search term" do visit root_path + page.find('summary', text: 'Language').click within "#facet-language_ssim" do click_link "Tibetan" end @@ -18,6 +19,7 @@ expect(page).to have_selector("span.facet-count.selected", text: "6") end + page.find('summary', text: 'Region').click click_link "India" within ("#sortAndPerPage") do expect(page).to have_content "1 - 2 of 2" @@ -40,6 +42,7 @@ expect(page).to have_content "1 - 10 of 11" end + page.find('summary', text: 'Language').click within "#facet-language_ssim" do click_link "Tibetan" end @@ -54,12 +57,27 @@ expect(page).to have_content "You searched for:" expect(page).to have_content "history" end + end + + it 'works with search terms and multiple filters' do + visit root_path + fill_in "q", with: 'history' + click_button 'search' + page.find('summary', text: 'Language').click + within "#facet-language_ssim" do + click_link "Tibetan" + end + page.find('summary', text: 'Publication Year').click click_link "2004" within ("#sortAndPerPage") do expect(page).to have_content "1 entry found" end + within "#appliedParams" do + expect(page).to have_content "You searched for:" + expect(page).to have_content "history" + end within "#facet-language_ssim" do expect(page).to have_selector("span.selected", text: "Tibetan") expect(page).to have_selector("span.facet-count.selected", text: "1") @@ -72,6 +90,7 @@ it "allows removing filters" do visit root_path + page.find('summary', text: 'Language').click within "#facet-language_ssim" do click_link "Tibetan" end @@ -90,6 +109,7 @@ visit root_path fill_in "q", with: 'history' click_button 'search' + page.find('summary', text: 'Language').click within "#facet-language_ssim" do click_link 'Tibetan' end @@ -98,6 +118,7 @@ expect(page).to have_selector("span.facet-count.selected", text: "2") end + page.find('summary', text: 'Publication Year').click click_link '2004' within "#facet-language_ssim" do @@ -125,6 +146,7 @@ visit root_path fill_in "q", with: 'history' click_button 'search' + page.find('summary', text: 'Language').click within "#facet-language_ssim" do click_link 'Tibetan' end @@ -147,6 +169,7 @@ visit root_path fill_in "q", with: 'history' click_button 'search' + page.find('summary', text: 'Language').click within "#facet-language_ssim" do click_link 'Tibetan' end @@ -167,7 +190,7 @@ end end - it "is collapsed when not selected", js: true do + it "is collapsed when not selected" do visit root_path within(".blacklight-subject_ssim") do @@ -175,38 +198,28 @@ end end - it "expands when the heading button is clicked", js: true do + it "expands when the summary is clicked" do visit root_path within(".blacklight-subject_ssim") do expect(page).not_to have_selector(".card-body", visible: true) - find(".card-header button").click + find("summary").click expect(page).to have_selector(".card-body", visible: true) end end - it "expands when the button is clicked", js: true do + it "keeps selected facets expanded on page load" do visit root_path within(".blacklight-subject_ssim") do - expect(page).not_to have_selector(".card-body", visible: true) - find(".card-header").click + page.find('summary.facet-field-heading', text: 'Topic').click expect(page).to have_selector(".card-body", visible: true) end - end - - it "keeps selected facets expanded on page load", js: true do - visit root_path - - within(".blacklight-subject_ssim") do - page.find('h3.facet-field-heading', text: 'Topic').click - expect(page).to have_selector(".panel-collapse", visible: true) - end within(".blacklight-subject_ssim") do click_link "Japanese drama" end within(".blacklight-subject_ssim") do - expect(page).to have_selector(".panel-collapse", visible: true) + expect(page).to have_selector(".card-body", visible: true) end end end diff --git a/spec/features/search_sort_spec.rb b/spec/features/search_sort_spec.rb index b5d77eb43a..33840d6f08 100644 --- a/spec/features/search_sort_spec.rb +++ b/spec/features/search_sort_spec.rb @@ -3,6 +3,7 @@ RSpec.describe "Search Sort" do it "sorts on facet results with no search terms" do visit root_path + page.find('summary', text: 'Language').click within "#facet-language_ssim" do click_link 'English' end diff --git a/spec/views/catalog/_facet_layout.html.erb_spec.rb b/spec/views/catalog/_facet_layout.html.erb_spec.rb index 15fa311448..e5d61c4ea4 100644 --- a/spec/views/catalog/_facet_layout.html.erb_spec.rb +++ b/spec/views/catalog/_facet_layout.html.erb_spec.rb @@ -20,22 +20,14 @@ expect(rendered).to have_selector '.blacklight-some_field' end - it "has a title with a link for a11y" do + it "has a title" do render partial: 'catalog/facet_layout', locals: { facet_field: facet_field } - expect(rendered).to have_selector 'h3', text: 'Some Field' - end - - it "is collapsable" do - render partial: 'catalog/facet_layout', locals: { facet_field: facet_field } - expect(rendered).to have_selector 'button.collapsed[data-toggle="collapse"][data-bs-toggle="collapse"][aria-expanded="false"]' - expect(rendered).to have_selector '.collapse .card-body' + expect(rendered).to have_selector 'summary', text: 'Some Field' end it "is configured to be open by default" do allow(facet_field).to receive_messages(collapse: false) render partial: 'catalog/facet_layout', locals: { facet_field: facet_field } - expect(rendered).to have_selector 'button[data-toggle="collapse"][data-bs-toggle="collapse"][aria-expanded="true"]' - expect(rendered).not_to have_selector '.card-header.collapsed' - expect(rendered).to have_selector '.collapse.show .card-body' + expect(rendered).to have_selector 'details[open]' end end