Merge pull request #2754 from sul-dlss/updateSkipLink

Enable skip links to show above the fold in their entirety

app/assets/stylesheets/modules/spotlight_overrides.scss

@@ -220,3 +220,9 @@ h5,
     z-index: 1;
   }
 }
+
+// This allows for the skip links to appear above the header
+// instead of overlapping with the header. 
+#skip-link {
+  position: relative !important;
+}

app/components/skip_link_component.html.erb

@@ -1,5 +1,7 @@
-<nav id="skip" class="visually-hidden-focusable" aria-label="<%= t('blacklight.skip_links.label') %>">
+<nav id="skip-link-exhibits" class="visually-hidden-focusable" aria-label="<%= t('blacklight.skip_links.label') %>">
+    <div class="container-xl">
     <%= link_to_main %>
     <%= link_to_search %>
-    <%= content %>
-</nav>
+    <%= link_to_content %>
+    </div>
+</nav>

app/components/skip_link_component.rb

@@ -1,9 +1,15 @@
 # frozen_string_literal: true
 
-# Draws the skip links for screen readers
+# Overriding the skip link component to use the component library classes
 class SkipLinkComponent < Blacklight::SkipLinkComponent
   # This is only needed until we are using https://github.com/projectblacklight/blacklight/pull/3461
   def link_classes
-    'visually-hidden-focusable rounded-bottom py-2 px-3'
+    'd-inline-flex m-1 py-2 px-3'
+  end
+
+  # This overrides the <%= content %> line since the styling of that link
+  # uses the Blacklight styles by default
+  def link_to_content
+    link_to t('blacklight.skip_links.first_result'), '#documents', class: link_classes if content.present?
   end
 end

spec/components/skip_link_component_spec.rb

@@ -3,13 +3,25 @@
 require 'rails_helper'
 
 RSpec.describe SkipLinkComponent, type: :component do
-  pending "add some examples to (or delete) #{__FILE__}"
-
-  # it "renders something useful" do
-  #   expect(
-  #     render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html
-  #   ).to include(
-  #     "Hello, components!"
-  #   )
-  # end
+  describe 'no search results' do
+    before do
+      render_inline(described_class.new)
+    end
+
+    it { expect(page).to have_css('#skip-link-exhibits.visually-hidden-focusable') }
+    it { expect(page).to have_css('a.d-inline-flex.m-1', visible: false, count: 2) }
+  end
+
+  # If an existing content block is passed to this component,
+  # the component should include the link to the first result
+  describe 'with existing search results' do
+    before do
+      render_inline(described_class.new) do
+        'something'
+      end
+    end
+
+    it { expect(page).to have_css('a.d-inline-flex.m-1', visible: false, count: 3) }
+    it { expect(page).to have_link(href: '#documents') }
+  end
 end

spec/rails_helper.rb

@@ -8,6 +8,7 @@
 require 'factory_bot_rails'
 require 'view_component/test_helpers'
 require 'view_component/system_test_helpers'
+require 'capybara/rspec'
 
 require 'selenium-webdriver'
 
@@ -95,4 +96,5 @@
   config.extend ControllerMacros, type: :controller
   config.include ViewComponent::TestHelpers, type: :component
   config.include ViewComponent::SystemTestHelpers, type: :component
+  config.include Capybara::RSpecMatchers, type: :component
 end