Define new helper for tab links, with aria

** Why are these changes being introduced:

We want to add an `aria-current="page"` attribute to the currently
active tab link on a results page, so that assistive technologies can
parse which is the active tab. This requires a conditional link_to call,
as well as an update to the javascript which handles tab changes.

** Relevant ticket(s):

* https://mitlibraries.atlassian.net/browse/use-180

** How does this address that need:

Because we can't (apparently) write a conditional inside an argument to
a link_to call, we have to maintain the conditional check elsewhere -
so to prevent the source_tabs partial from becoming a mess of multiple
conditionas, we define a new search helper function, link_to_tab. This
takes a string as an argument, and is capable of outputting both a link
to the active tab, as well as to an inactive tab.

We also update loading_spinner.js to be able to maintain the state of
the aria-current attribute.

** Document any side effects to this change:

The tests for this helper function _should_ be robust enough, but I
worry that they're a bit too clever. I didn't want to just write a
string comparison assertion, because that feels very fragile given how
much this partial has been changing lately. The assertions as written
should focus on the values being present or not, but still be robust to
other changes.

Also note that, for now, the source_tabs partial is still a bit bespoke
in that there are explicitly two calls to the various tabs. I'd
originally intended to define a list in the controller, but managing the
list of tabs in this way feels awkward and like it doesn't gain anything
since the tabs are entwined with so much of the rest of the application.
Abstracting the tab order and contents to a list doesn't save us from
other complexity.

Author: matt-bernhardt

app/helpers/search_helper.rb

@@ -22,6 +22,19 @@ def link_to_result(result)
     end
   end
 
+  def link_to_tab(target)
+    if @active_tab == target.downcase
+      link_to target, results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: target.downcase)),
+        aria: { current: "page" },
+        class: "active tab-link",
+        data: { turbo_frame: "search-results", turbo_action: "advance" }
+    else
+      link_to target, results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: target.downcase)),
+        class: "tab-link",
+        data: { turbo_frame: "search-results", turbo_action: "advance" }
+    end
+  end
+
   def view_online(result)
     return unless result[:source_link].present?
 

app/javascript/loading_spinner.js

@@ -23,15 +23,17 @@ document.addEventListener('turbo:frame-render', function(event) {
       // console.log(`Updated tab input value to: ${queryParam}`);
     }
 
-    // update active tab styling
-    // remove active class from all tabs
+    // update tab links to reflect new state. This is a two-step process:
+    // 1. Reset all tabs to base condition
     document.querySelectorAll('.tab-link').forEach((tab) => {
       tab.classList.remove('active');
+      tab.removeAttribute('aria-current');
     });
-    // add active class to current tab
+    // 2. Add "active" class and aria-current attribute to the newly-active tab link
     const currentTabLink = document.querySelector(`.tab-link[href*="tab=${queryParam}"]`);
     if (currentTabLink) {
       currentTabLink.classList.add('active');
+      currentTabLink.setAttribute('aria-current', 'page');
     }
 
     // Clear the pending action

app/views/search/_source_tabs.html.erb

@@ -1,14 +1,8 @@
   <!-- Tab Navigation -->
   <nav id="tabs" class="tab-navigation" aria-label="Result type navigation">
     <ul>
-      <li>
-        <%= link_to "Primo", results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: 'primo')),
-                class: "tab-link #{'active' if @active_tab == 'primo'}",
-                data: { turbo_frame: "search-results", turbo_action: "advance" } %></li>  
-      <li>
-        <%= link_to "TIMDEX", results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: 'timdex')),
-                class: "tab-link #{'active' if @active_tab == 'timdex'}",
-                data: { turbo_frame: "search-results", turbo_action: "advance" } %></li>
+      <li><%= link_to_tab("Primo") %></li>
+      <li><%= link_to_tab("TIMDEX") %></li>
     </ul>
   </nav>
 

test/helpers/search_helper_test.rb

@@ -199,6 +199,27 @@ class SearchHelperTest < ActionView::TestCase
     assert_equal 'Sample Document Title', link_to_result(result)
   end
 
+  test 'link_to_tab builds a link without an aria attribute when that tab is not active' do
+    @active_tab = 'bar'
+    actual = link_to_tab('Foo')
+
+    assert_select Nokogiri::HTML::Document.parse( actual ), 'a' do |link|
+      assert_select '[class*=?]', 'active', count: 0
+      assert_select '[class*=?]', 'tab-link'
+      assert_select '[aria-current=?]', 'page', count: 0
+    end
+  end
+
+  test 'link_to_tab builds a link that includes an aria attribute when that tab is active' do
+    @active_tab = 'foo'
+    actual = link_to_tab('Foo')
+
+    assert_select Nokogiri::HTML::Document.parse( actual ), 'a' do |link|
+      assert_select link, '[class*=?]', 'active'
+      assert_select link, '[aria-current=?]', 'page', count: 1
+    end
+  end
+
   test 'primo_search_url generates correct Primo URL' do
     query = 'machine learning'
     expected_url = 'https://mit.primo.exlibrisgroup.com/discovery/search?query=any%2Ccontains%2Cmachine+learning&vid=01MIT_INST%3AMIT'