blacklight 8.10.1 → 9.0.0.beta1

data/app/components/blacklight/document/group_component.html.erb

@@ -4,6 +4,6 @@
     <%= grouped_documents %>
   </div>
   <%- if @group_limit > 0 && @group.total > @group_limit %>
-    <%= helpers.link_to t('blacklight.search.group.more'), add_group_facet_params_and_redirect(@group), class: 'more-in-group' %>
+    <%= helpers.link_to t('blacklight.search.group.more'), add_group_facet_params_and_redirect(@group), class: 'more-in-group float-right' %>
   <%- end %>
 </div>

data/app/components/blacklight/document/page_header_component.rb

@@ -40,7 +40,7 @@ module Blacklight
       end
 
       def header_container_classes
-        has_header_tools? ? 'row pagination-search-widgets pb-2' : 'pagination-search-widgets'
+        has_header_tools? ? 'row pagination-search-widgets pb-3' : 'pagination-search-widgets pb-3'
       end
 
       def header_actions

data/app/components/blacklight/document/sidebar_component.rb

@@ -16,12 +16,12 @@ module Blacklight
 
       private
 
-      def render_show_tools
-        blacklight_config.view_config(:show).show_tools_component&.tap do |show_tools_component_class|
-          return render show_tools_component_class.new(document: document)
-        end
+      def show_tools_component_class
+        blacklight_config.view_config(:show).show_tools_component
+      end
 
-        render 'show_tools', document: document, silence_deprecation: helpers.partial_from_blacklight?('show_tools')
+      def render_show_tools
+        render show_tools_component_class.new(document: document)
       end
     end
   end

data/app/components/blacklight/document_component.rb

@@ -22,9 +22,6 @@ module Blacklight
   class DocumentComponent < Blacklight::Component
     with_collection_parameter :document
 
-    # ViewComponent 3 changes iteration counters to begin at 0 rather than 1
-    COLLECTION_INDEX_OFFSET = ViewComponent::VERSION::MAJOR < 3 ? 0 : 1
-
     # Content appearing before the document
     renders_one :header
 
@@ -37,7 +34,7 @@ module Blacklight
 
     # The document title with some reasonable default behavior
     renders_one :title, (lambda do |*args, component: nil, **kwargs|
-      component ||= @presenter&.view_config&.title_component || Blacklight::DocumentTitleComponent
+      component ||= view_config.title_component || Blacklight::DocumentTitleComponent
 
       component.new(*args, counter: @counter, document: @document, presenter: @presenter, as: @title_component, actions: !@show, link_to_document: !@show, document_component: self, **kwargs)
     end)
@@ -45,7 +42,7 @@ module Blacklight
     renders_one :embed, (lambda do |static_content = nil, *args, component: nil, **kwargs|
       next static_content if static_content.present?
 
-      component ||= @presenter.view_config&.embed_component
+      component ||= view_config.embed_component
 
       next unless component
 
@@ -56,7 +53,7 @@ module Blacklight
     renders_one :metadata, (lambda do |static_content = nil, *args, component: nil, fields: nil, **kwargs|
       next static_content if static_content.present?
 
-      component ||= @presenter&.view_config&.metadata_component || Blacklight::DocumentMetadataComponent
+      component ||= view_config.metadata_component || Blacklight::DocumentMetadataComponent
 
       component.new(*args, fields: fields || @presenter&.field_presenters || [], **kwargs)
     end)
@@ -67,7 +64,7 @@ module Blacklight
     renders_one :thumbnail, (lambda do |image_options_or_static_content = {}, *args, component: nil, **kwargs|
       next image_options_or_static_content if image_options_or_static_content.is_a? String
 
-      component ||= @presenter&.view_config&.thumbnail_component || Blacklight::Document::ThumbnailComponent
+      component ||= view_config.thumbnail_component || Blacklight::Document::ThumbnailComponent
 
       component.new(*args, document: @document, presenter: @presenter, counter: @counter, image_options: image_options_or_static_content, **kwargs)
     end)
@@ -81,7 +78,6 @@ module Blacklight
 
     # rubocop:disable Metrics/ParameterLists
     # @param document [Blacklight::DocumentPresenter]
-    # @param presenter [Blacklight::DocumentPresenter] alias for document
     # @param partials [Array, nil] view partial names that should be used to provide content for the `partials` slot
     # @param id [String] HTML id for the root element
     # @param classes [Array, String] additional HTML classes for the root element
@@ -91,13 +87,11 @@ module Blacklight
     # @param document_counter [Number, nil] provided by ViewComponent collection iteration
     # @param counter_offset [Number] the offset of the start of the collection counter parameter for the component to the overall result set
     # @param show [Boolean] are we showing only a single document (vs a list of search results); used for backwards-compatibility
-    def initialize(document: nil, presenter: nil, partials: nil,
+    def initialize(document: nil, partials: nil,
                    id: nil, classes: [], component: :article, title_component: nil,
                    counter: nil, document_counter: nil, counter_offset: 0,
                    show: false, **args)
-      Blacklight.deprecation.warn('the `presenter` argument to DocumentComponent#initialize is deprecated; pass the `presenter` in as document instead') if presenter
-
-      @presenter = presenter || document || args[self.class.collection_parameter]
+      @presenter = document || args[self.class.collection_parameter]
       @document = @presenter.document
       @view_partials = partials || []
 
@@ -108,7 +102,7 @@ module Blacklight
 
       @counter = counter
       @document_counter = document_counter || args.fetch(self.class.collection_counter_parameter, nil)
-      @counter ||= @document_counter + COLLECTION_INDEX_OFFSET + counter_offset if @document_counter.present?
+      @counter ||= 1 + @document_counter + counter_offset if @document_counter.present?
 
       @show = show
     end
@@ -139,6 +133,8 @@ module Blacklight
 
     private
 
+    delegate :view_config, to: :@presenter
+
     attr_reader :document_counter, :presenter, :view_partials
 
     def show?

data/app/components/blacklight/document_title_component.rb

@@ -7,7 +7,8 @@ module Blacklight
     renders_many :actions
 
     # rubocop:disable Metrics/ParameterLists
-    def initialize(title = nil, document: nil, presenter: nil, as: :h3, counter: nil, classes: 'index_title document-title-heading col', link_to_document: true, document_component: nil, actions: true)
+    def initialize(title = nil, document: nil, presenter: nil, as: :h3, counter: nil, classes: 'index_title document-title-heading col h5', link_to_document: true, document_component: nil,
+                   actions: true)
       raise ArgumentError, 'missing keyword: :document or :presenter' if presenter.nil? && document.nil?
 
       @title = title
@@ -42,7 +43,7 @@ module Blacklight
 
       (@has_actions_slot && get_slot(:actions)) ||
         ([@document_component&.actions] if @document_component&.actions.present?) ||
-        [helpers.render_index_doc_actions(presenter.document, wrapping_class: 'index-document-functions col-sm-3 col-lg-2')]
+        [helpers.render_index_doc_actions(presenter.document, wrapping_class: 'index-document-functions col-sm-3 col-lg-2 mb-4 mb-sm-0')]
     end
 
     def counter

data/app/components/blacklight/facet_field_component.html.erb

@@ -1,20 +1,20 @@
-<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 %>">
+<div class="accordion-item facet-limit blacklight-<%= @facet_field.key %> <%= 'facet-limit-active' if @facet_field.active? %>">
+  <h3 class="accordion-header p-0 facet-field-heading h6" 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? %>"
+      class="btn accordion-button <%= "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' %>"
-      aria-controls="<%= html_id %>"
+      arial-controls="<%= html_id %>"
     >
       <%= label %>
     </button>
   </h3>
   <div id="<%= html_id %>" role="region" aria-labelledby="<%= header_html_id %>" class="panel-collapse facet-content collapse <%= "show" unless @facet_field.collapsed? %>">
-    <div class="card-body">
+    <div class="accordion-body">
       <%= body %>
 
       <% if @facet_field.modal_path %>

data/app/components/blacklight/facet_field_list_component.rb

@@ -7,24 +7,6 @@ module Blacklight
       @layout = layout == false ? FacetFieldNoLayoutComponent : Blacklight::FacetFieldComponent
     end
 
-    ##
-    # Renders the list of values
-    # removes any elements where render_facet_item returns a nil value. This enables an application
-    # to filter undesireable facet items so they don't appear in the UI
-    # @deprecated
-    def render_facet_limit_list(paginator, facet_field, wrapping_element = :li)
-      return render(facet_items(wrapping_element: wrapping_element)) if paginator == @facet_field.paginator && facet_field == @facet_field.key
-
-      facet_config ||= helpers.facet_configuration_for_field(facet_field)
-
-      collection = paginator.items.map do |item|
-        facet_item_presenter(item, facet_config, facet_field)
-      end
-
-      render(facet_item_component_class(facet_config).with_collection(collection, wrapping_element: wrapping_element))
-    end
-    Blacklight.deprecation.deprecate_methods(self, render_facet_limit_list: 'Call e.g. `render facet_items` instead')
-
     def facet_items(wrapping_element: :li, **item_args)
       facet_item_component_class.with_collection(facet_item_presenters, wrapping_element: wrapping_element, **item_args)
     end
@@ -39,12 +21,12 @@ module Blacklight
       @facet_field.paginator&.items&.any?
     end
 
-    def facet_item_presenter(facet_item, deprecated_facet_config = nil, facet_field = nil)
-      (deprecated_facet_config || facet_config).item_presenter.new(facet_item, deprecated_facet_config || facet_config, helpers, facet_field || @facet_field.key)
+    def facet_item_presenter(facet_item)
+      facet_config.item_presenter.new(facet_item, facet_config, helpers, @facet_field.key)
     end
 
-    def facet_item_component_class(deprecated_facet_config = nil)
-      (deprecated_facet_config || facet_config).item_component
+    def facet_item_component_class
+      facet_config.item_component
     end
 
     def facet_config

data/app/components/blacklight/facet_field_pagination_component.html.erb

@@ -1,10 +1,10 @@
 <div class="prev_next_links btn-group">
   <%= helpers.link_to_previous_page @facet_field.paginator, raw(t('views.pagination.previous')), params: @facet_field.search_state.to_h, param_name: param_name, class: 'btn btn-link', data: { blacklight_modal: "preserve" } do %>
-    <%= content_tag :a, raw(t('views.pagination.previous')), class: 'disabled btn btn-link text-decoration-none', aria: { disabled: true } %>
+    <%= content_tag :span, raw(t('views.pagination.previous')), class: 'disabled btn' %>
   <% end %>
 
   <%= helpers.link_to_next_page @facet_field.paginator, raw(t('views.pagination.next')), params: @facet_field.search_state.to_h, param_name: param_name, class: 'btn btn-link',  data: { blacklight_modal: "preserve" } do %>
-    <%= content_tag :a, raw(t('views.pagination.next')), class: 'disabled btn btn-link text-decoration-none', aria: { disabled: true } %>
+    <%= content_tag :span, raw(t('views.pagination.next')), class: 'disabled btn' %>
   <% end %>
 </div>
 

data/app/components/blacklight/facet_item_component.rb

@@ -54,8 +54,8 @@ module Blacklight
         tag.span(label, class: "selected") +
           # remove link
           link_to(href, class: "remove", rel: "nofollow") do
-            render(Blacklight::Icons::RemoveComponent.new) +
-              tag.span(helpers.t(:'blacklight.search.facets.selected.remove'), class: 'sr-only visually-hidden')
+            render(Blacklight::Icons::RemoveComponent.new(aria_hidden: true)) +
+              tag.span(helpers.t(:'blacklight.search.facets.selected.remove'), class: 'visually-hidden')
           end
       end + render_facet_count(classes: ["selected"])
     end

data/app/components/blacklight/facet_item_pivot_component.rb

@@ -32,7 +32,7 @@ module Blacklight
 
       id = "h-#{self.class.mint_id}" if @collapsing && has_items?
 
-      content_tag @wrapping_element, role: 'treeitem', class: 'treeitem' do
+      content_tag @wrapping_element, class: 'treeitem' do
         concat(content_tag('span', class: "d-flex flex-row align-items-center") do
           concat facet_toggle_button(id) if has_items? && @collapsing
           concat content_tag('span', render(facet), class: "facet-values d-flex flex-row flex-grow-1 #{'facet-leaf-node' if has_items? && @collapsing}", id: id && "#{id}_label")
@@ -75,7 +75,7 @@ module Blacklight
     def toggle_icon(type)
       content_tag 'span', class: type do
         concat @icons[type]
-        concat content_tag('span', t(type, scope: 'blacklight.search.facets.pivot'), class: 'sr-only visually-hidden')
+        concat content_tag('span', t(type, scope: 'blacklight.search.facets.pivot'), class: 'visually-hidden')
       end
     end
   end

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

@@ -1,27 +1,12 @@
 <% # main container for facets/limits menu -%>
 <%= content_tag :div, id: @id,  class: 'facets sidenav facets-toggleable-md' do %>
   <div class="facets-header">
-    <%= content_tag :h2, @title, class: 'facets-heading' if @title %>
+    <%= content_tag :h2, @title, class: 'facets-heading h4' if @title %>
 
-    <%= content_tag :button,
-      class: 'btn btn-outline-secondary facet-toggle-button d-block d-lg-none',
-      type: 'button',
-      data: {
-        toggle: 'collapse',
-        target: "##{@panel_id}",
-        'bs-toggle': 'collapse',
-        'bs-target': "##{@panel_id}"
-      },
-      aria: {
-        controls: @panel_id,
-        expanded: 'false',
-      } do %>
-      <span data-show-label><%= t('blacklight.search.facets.group.open') %></span>
-      <span data-hide-label><%= t('blacklight.search.facets.group.close') %></span>
-    <% end %>
+    <%= collapse_toggle_button(@panel_id) %>
   </div>
 
-  <div id="<%= @panel_id %>" class="facets-collapse collapse">
+  <div id="<%= @panel_id %>" class="facets-collapse d-lg-block collapse accordion">
     <%= body %>
   </div>
 <% end %>

data/app/components/blacklight/response/facet_group_component.rb

@@ -6,42 +6,26 @@ module Blacklight
     class FacetGroupComponent < Blacklight::Component
       renders_one :body
 
-      # @param [Blacklight::Response] response
-      # @param [Array<Blacklight::Configuration::FacetField>] fields facet fields to render
-      # @param [String] title the title of the facet group section
       # @param [String] id a unique identifier for the group
-      def initialize(id:, title: nil, fields: [], response: nil)
+      # @param [String] title the title of the facet group section
+      def initialize(id:, title: nil)
         @groupname = id
         @id = id ? "facets-#{id}" : 'facets'
         @title = title || I18n.t("blacklight.search.#{@id}.title")
         @panel_id = id ? "facet-panel-#{id}-collapse" : 'facet-panel-collapse'
+      end
 
-        # deprecated variables
-        @fields = fields
-        @response = response
+      def collapse_toggle_button(panel_id)
+        render button_component.new(panel_id: panel_id)
       end
 
-      # Provide fallback behavior for rendering this object without a body slot
-      def before_render
-        set_slot(:body, nil) { default_body } unless body?
+      def button_component
+        Blacklight::Response::FacetToggleButtonComponent
       end
 
       def render?
         body.present?
       end
-
-      private
-
-      # @deprecated
-      def default_body
-        Blacklight.deprecation.warn('Rendering the Blacklight::FacetGroupComponent without a body slot is deprecated.')
-        render(Blacklight::FacetComponent.with_collection(@fields, response: @response))
-      end
-
-      # @deprecated
-      def blacklight_config
-        helpers.blacklight_config
-      end
     end
   end
 end

data/app/components/blacklight/response/facet_toggle_button_component.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag :button,
+  class: @classes,
+  type: 'button',
+  data: {
+    toggle: 'collapse',
+    target: "##{@panel_id}",
+    'bs-toggle': 'collapse',
+    'bs-target': "##{@panel_id}"
+  },
+  aria: {
+    controls: @panel_id,
+    expanded: 'false',
+  } do %>
+  <span data-show-label><%= t('blacklight.search.facets.group.open') %></span>
+  <span data-hide-label><%= t('blacklight.search.facets.group.close') %></span>
+<% end %>

data/app/components/blacklight/response/facet_toggle_button_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Response
+    # Render the button that shows or collapses the facets on a narrow viewport
+    class FacetToggleButtonComponent < Blacklight::Component
+      # @param [String] panel_id
+      def initialize(panel_id:, classes: 'btn btn-outline-secondary facet-toggle-button d-block d-lg-none')
+        @panel_id = panel_id
+        @classes = classes
+      end
+    end
+  end
+end

data/app/components/blacklight/response/pagination_component.html.erb

@@ -1,3 +1,3 @@
-<%= tag.nav class: 'paginate-section', **html_attr do %>
+<%= tag.nav class: @classes, **html_attr do %>
   <%= pagination %>
 <% end %>

data/app/components/blacklight/response/pagination_component.rb

@@ -6,9 +6,10 @@ module Blacklight
     class PaginationComponent < Blacklight::Component
       # @param [Blacklight::Response] response
       # @param [Hash] html html options for the pagination container
-      def initialize(response:, html: {}, **pagination_args)
+      def initialize(response:, html: {}, classes: 'paginate-section', **pagination_args)
         @response = response
         @html = html
+        @classes = classes
         @pagination_args = pagination_args
       end
 

data/app/components/blacklight/response/sort_component.rb

@@ -22,6 +22,7 @@ module Blacklight
                  param: @param,
                  choices: @choices,
                  id: @id,
+                 classes: @classes,
                  search_state: @search_state,
                  selected: @selected
                ))

data/app/components/blacklight/response/view_type_button_component.html.erb

@@ -1,4 +1,4 @@
 <%= link_to url, title: label, aria: aria_attributes, class: "#{Array(@classes).join(' ')} view-type-#{ @key.to_s.parameterize } #{"active" if selected?}" do %>
   <%= icon %>
-  <span class="caption"><%= label %></span>
+  <span class="caption visually-hidden"><%= label %></span>
 <% end %>

data/app/components/blacklight/response/view_type_component.html.erb

@@ -1,5 +1,5 @@
 <div class="view-type">
-  <span class="sr-only visually-hidden"><%= t('blacklight.search.view_title') %></span>
+  <span class="visually-hidden"><%= t('blacklight.search.view_title') %></span>
   <div class="view-type-group btn-group">
     <% views.each do |view| %>
       <%= view %>

data/app/components/blacklight/search/facet_suggest_input.html.erb

@@ -1,12 +1,9 @@
-<label for="facet_suggest_<%= facet.key %>">
+<label for="facet-suggest-<%= facet.key %>">
   <%= I18n.t('blacklight.search.facets.suggest.label', field_label: presenter&.label) %>
 </label>
-<%= text_field_tag "facet_suggest_#{facet.key}",
-  nil,
-  class: "facet-suggest form-control mb-3",
-  data: {
-    facet_field: facet.key,
-    facet_search_context: presenter.view_context.search_facet_path(id: facet.key)
-  },
-  placeholder: I18n.t('blacklight.search.form.search.placeholder')
-%>
+<input class="facet-suggest form-control"
+       id="facet-suggest-<%= facet.key %>"
+       data-facet-field="<%= facet.key %>"
+       name="facet_suggest_<%= facet.key %>"
+       placeholder="<%= I18n.t('blacklight.search.form.search.placeholder') %>">
+</input>

data/app/components/blacklight/search/facet_suggest_input.rb

@@ -11,10 +11,6 @@ module Blacklight
       private
 
       attr_accessor :facet, :presenter
-
-      def render?
-        facet&.suggest
-      end
     end
   end
 end

data/app/components/blacklight/search/per_page_component.html.erb

@@ -1,2 +1,2 @@
-<span class="sr-only visually-hidden"><%= t('blacklight.search.per_page.title') %></span>
+<span class="visually-hidden"><%= t('blacklight.search.per_page.title') %></span>
 <%= dropdown %>

data/app/components/blacklight/search/per_page_component.rb

@@ -23,6 +23,7 @@ module Blacklight
                  param: :per_page,
                  choices: per_page_options_for_select,
                  id: 'per_page-dropdown',
+                 classes: ['mx-1'],
                  search_state: @search_state,
                  selected: current_per_page,
                  interpolation: :count

data/app/components/blacklight/search/sidebar_component.html.erb

@@ -1,7 +1,7 @@
 <search>
   <% facet_group_names.each do |groupname| %>
     <% fields = facet_fields_in_group(groupname) %>
-    <%= render group_component_class.new(id: groupname, fields: fields, response: response) do |component| %>
+    <%= render group_component_class.new(id: groupname) do |component| %>
       <% component.with_body do %>
         <%= render Blacklight::FacetComponent.with_collection(fields, response: response) %>
       <% end %>

data/app/components/blacklight/search/sidebar_component.rb

@@ -6,7 +6,7 @@ module Blacklight
       def initialize(blacklight_config:, response:, view_config:)
         @blacklight_config = blacklight_config
         @response = response
-        @group_component_class = view_config.facet_group_component || Blacklight::Response::FacetGroupComponent
+        @group_component_class = view_config.facet_group_component
       end
 
       attr_reader :group_component_class, :response

data/app/components/blacklight/search_bar_component.html.erb

@@ -2,7 +2,7 @@
   <%= form_with url: @url, local: true, method: @method, class: @classes.join(' '), scope: @prefix, role: 'search', **@form_options do |f| %>
     <%= render Blacklight::HiddenSearchStateComponent.new(params: @params) %>
     <% if search_fields.length > 1 %>
-      <%= f.label :search_field, scoped_t('search_field.label'), class: 'sr-only visually-hidden' %>
+      <%= f.label :search_field, scoped_t('search_field.label'), class: 'visually-hidden' %>
     <% end %>
     <% before_input_groups.each do |input_group| %>
       <%= input_group %>
@@ -20,9 +20,9 @@
         <%= f.hidden_field :search_field, value: search_fields.first.last %>
       <% end %>
 
-      <%= f.label @query_param, scoped_t('search.label'), class: 'sr-only visually-hidden' %>
+      <%= f.label @query_param, scoped_t('search.label'), class: 'visually-hidden' %>
       <% if autocomplete_path.present? %>
-        <auto-complete src="<%= autocomplete_path %>" for="autocomplete-popup" class="search-autocomplete-wrapper <%= rounded_border_class %>">
+        <auto-complete src="<%= autocomplete_path %>" for="autocomplete-popup" class="search-autocomplete-wrapper form-control <%= rounded_border_class %>">
           <%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control #{rounded_border_class}", autofocus: @autofocus, aria: { label: scoped_t('search.label'), autocomplete: 'list', controls: 'autocomplete-popup' }  %>
           <ul id="autocomplete-popup" class="dropdown-menu" role="listbox" aria-label="<%= scoped_t('search.label') %>" hidden></ul>
         </auto-complete>

data/app/components/blacklight/search_bar_component.rb

@@ -11,7 +11,7 @@ module Blacklight
     def initialize(
       url:, params:,
       advanced_search_url: nil,
-      classes: ['search-query-form'], prefix: nil,
+      classes: %w[search-query-form col-md-12 col-lg-8], prefix: nil,
       method: 'GET', q: nil, query_param: :q,
       search_field: nil, autocomplete_path: nil,
       autofocus: nil, i18n: { scope: 'blacklight.search.form' },
@@ -63,7 +63,7 @@ module Blacklight
     def rounded_border_class
       return 'rounded-0' if search_fields.length > 1
 
-      'rounded-left rounded-start'
+      'rounded-start'
     end
 
     private

data/app/components/blacklight/search_button_component.rb

@@ -8,8 +8,8 @@ module Blacklight
     end
 
     def call
-      tag.button(class: 'btn btn-primary search-btn', type: 'submit', id: @id) do
-        tag.span(@text, class: "visually-hidden-sm me-sm-1 submit-search-text") +
+      tag.button(class: 'btn btn-primary search-btn', type: 'submit', id: @id, aria: { label: @text }) do
+        tag.span(@text, class: "d-none d-md-inline me-sm-1 submit-search-text", aria: { hidden: true }) +
           render(Blacklight::Icons::SearchComponent.new)
       end
     end

data/app/components/blacklight/search_context/server_applied_params_component.html.erb

@@ -1,4 +1,4 @@
-<div id="appliedParams" class="clearfix constraints-container">
-  <%= render 'start_over' %>
+<div id="appliedParams" class="clearfix constraints-container mb-2">
+  <%= start_over %>
   <%= link_back_to_catalog class: 'btn btn-outline-secondary' %>
 </div>

data/app/components/blacklight/search_context/server_applied_params_component.rb

@@ -2,12 +2,21 @@
 
 module Blacklight
   module SearchContext
+    # This is displayed on the show page when the user has a search session.
     class ServerAppliedParamsComponent < Blacklight::Component
       delegate :current_search_session, :link_back_to_catalog, to: :helpers
 
       def render?
         current_search_session
       end
+
+      def start_over
+        render start_over_component.new
+      end
+
+      def start_over_component
+        Blacklight::StartOverButtonComponent
+      end
     end
   end
 end

data/app/components/blacklight/skip_link_component.html.erb

@@ -1,4 +1,4 @@
-<nav id="skip-link" class="visually-hidden-focusable sr-only sr-only-focusable" aria-label="<%= t('blacklight.skip_links.label') %>">
+<nav id="skip-link" class="visually-hidden-focusable" aria-label="<%= t('blacklight.skip_links.label') %>">
   <div class="container-xl">
     <%= link_to_main %>
     <%= link_to_search %>

data/app/components/blacklight/skip_link_component.rb

@@ -3,11 +3,11 @@
 module Blacklight
   class SkipLinkComponent < Blacklight::Component
     def link_to_search
-      link_to t('blacklight.skip_links.search_field'), search_id, class: link_classes
+      render skip_link_item_component.new(text: t('blacklight.skip_links.search_field'), href: search_id)
     end
 
     def link_to_main
-      link_to t('blacklight.skip_links.main_content'), '#main-container', class: link_classes
+      render skip_link_item_component.new(text: t('blacklight.skip_links.main_content'), href: '#main-container')
     end
 
     def search_id
@@ -16,8 +16,12 @@ module Blacklight
       '#q'
     end
 
+    delegate :blacklight_config, to: :helpers
+    delegate :skip_link_item_component, to: :blacklight_config
+
     def link_classes
-      'd-inline-flex p-2 m-1'
+      Blacklight.deprecation.warn("Use SkipLinkItemComponent instead")
+      'visually-hidden-focusable rounded-bottom py-2 px-3'
     end
   end
 end

data/app/components/blacklight/skip_link_item_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Blacklight
+  class SkipLinkItemComponent < Blacklight::Component
+    def initialize(text:, href:)
+      @text = text
+      @href = href
+    end
+
+    def call
+      link_to @text, @href, class: link_classes
+    end
+
+    def link_classes
+      'd-inline-flex py-2 px-3'
+    end
+  end
+end

data/app/components/blacklight/system/dropdown_component.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag :div, id: @id, class: @classes.join(' ') do %>
   <%= button %>
 
-  <div class="dropdown-menu">
+  <div class="dropdown-menu" role="menu">
     <% options.each do |option| %>
       <%= option %>
     <% end %>