Update pagination buttons to include results count

JPrevost · JPrevost · commit 3b1e1fd69646 · 2025-11-14T09:00:24.000-05:00
Why are these changes being introduced: * UX design includes showing the number of results that will be shown when clicking the Next or Previous pagination buttons. * Previous page should always be the same number of results as per_page so it is simpler to say "Previous 20 results" rather than trying to calculate how many results remain before the start index. * Next page should show the remaining results if fewer than per_page results remain. * Also introduces a disabled state via a span for the next and previous buttons when there are no more results in that direction. Relevant ticket(s): * https://mitlibraries.atlassian.net/browse/USE-184 How does this address that need: * Mathed out the new pagination button text requirements * Updated PaginationHelper methods to calculate remaining results * Updated PaginationHelper methods to render disabled span when no more results in that direction
diff --git a/app/helpers/pagination_helper.rb b/app/helpers/pagination_helper.rb
@@ -7,10 +7,16 @@ def first_url(query_params)
     # Preserve the active tab in pagination URLs.
     params_copy[:tab] = @active_tab if @active_tab.present?
 
-    link_to results_path(params_copy), 'aria-label': 'First page',
-                                       data: { turbo_frame: 'search-results', turbo_action: 'advance' },
-                                       rel: 'nofollow' do
-      '&laquo;&laquo; First'.html_safe
+    # First page gets a disabled link in a span
+    # Check the original, not copied params to determine if we need a disabled link
+    if query_params[:page].blank? || query_params[:page].to_i == 1
+      '<span role="link" aria-disabled="true" tabindex="-1">First</span>'.html_safe
+    else
+      link_to results_path(params_copy), 'aria-label': 'First',
+                                         data: { turbo_frame: 'search-results', turbo_action: 'advance' },
+                                         rel: 'nofollow' do
+        'First'.html_safe
+      end
     end
   end
 
@@ -22,13 +28,32 @@ def next_url(query_params)
     # Preserve the active tab in pagination URLs.
     params_copy[:tab] = @active_tab if @active_tab.present?
 
-    link_to results_path(params_copy), 'aria-label': 'Next page',
-                                       data: { turbo_frame: 'search-results', turbo_action: 'advance' },
-                                       rel: 'nofollow' do
-      'Next &raquo;'.html_safe
+    if remaining_results <= 0
+      "<span role='link' aria-disabled='true' tabindex='-1'>#{next_page_label}</span>".html_safe
+    else
+      link_to results_path(params_copy), 'aria-label': next_page_label,
+                                         data: { turbo_frame: 'search-results', turbo_action: 'advance' },
+                                         rel: 'nofollow' do
+        next_page_label.html_safe
+      end
     end
   end
 
+  # Calculate how many results remain after the current end index
+  def remaining_results
+    @pagination[:hits] - @pagination[:end]
+  end
+
+  def next_page_label
+    label = if (@pagination[:end] + @pagination[:per_page]) < @pagination[:hits]
+              @pagination[:per_page]
+            else
+              remaining_results
+            end
+
+    "Next #{label} results"
+  end
+
   def prev_url(query_params)
     # Work with a copy to avoid mutating the original enhanced_query.
     params_copy = query_params.dup
@@ -37,10 +62,19 @@ def prev_url(query_params)
     # Preserve the active tab in pagination URLs.
     params_copy[:tab] = @active_tab if @active_tab.present?
 
-    link_to results_path(params_copy), 'aria-label': 'Previous page',
-                                       data: { turbo_frame: 'search-results', turbo_action: 'advance' },
-                                       rel: 'nofollow' do
-      '&laquo; Previous'.html_safe
+    # First page gets a disabled link in a span
+    if query_params[:page].blank? || query_params[:page].to_i == 1
+      "<span role='link' aria-disabled='true' tabindex='-1'>#{prev_page_label}</span>".html_safe
+    else
+      link_to results_path(params_copy), 'aria-label': prev_page_label,
+                                         data: { turbo_frame: 'search-results', turbo_action: 'advance' },
+                                         rel: 'nofollow' do
+        prev_page_label.html_safe
+      end
     end
   end
+
+  def prev_page_label
+    'Previous 20 results'
+  end
 end
diff --git a/app/models/analyzer.rb b/app/models/analyzer.rb
@@ -15,9 +15,10 @@ def initialize(enhanced_query, response, source)
     @pagination[:start] = ((enhanced_query[:page] - 1) * RESULTS_PER_PAGE) + 1
     @pagination[:end] = [enhanced_query[:page] * RESULTS_PER_PAGE, @pagination[:hits]].min
     @pagination[:prev] = enhanced_query[:page] - 1 if enhanced_query[:page] > 1
-
-    next_page_num = next_page(enhanced_query[:page], @pagination[:hits])
-    @pagination[:next] = next_page_num if next_page_num
+    @pagination[:next] = next_page(enhanced_query[:page], @pagination[:hits]) if next_page(
+      enhanced_query[:page], @pagination[:hits]
+    )
+    @pagination[:per_page] = RESULTS_PER_PAGE
   end
 
   private
diff --git a/app/views/search/_pagination.html.erb b/app/views/search/_pagination.html.erb
@@ -2,26 +2,13 @@
 
 <nav class="pagination-container" aria-label="Pagination">
   <div class="first">
-    <% current_page = @enhanced_query[:page] || 1 %>
-    <% if current_page > 2 %>
-      <%= first_url(@enhanced_query) %>
-    <% else %>
-      First
-    <% end %>
+    <%= first_url(@enhanced_query) %>
   </div>
   <div class="previous">
-    <% if @pagination[:prev] %>
-      <%= prev_url(@enhanced_query) %>
-    <% else %>
-      Previous
-    <% end %>
+    <%= prev_url(@enhanced_query) %>
   </div>
   <div class="current"><%= @pagination[:start] %> - <%= @pagination[:end] %> of <%= number_with_delimiter(@pagination[:hits]) %></div>
   <div class="next">
-    <% if @pagination[:next] %>
-      <%= next_url(@enhanced_query) %>
-    <% else %>
-      Last
-    <% end %>
+    <%= next_url(@enhanced_query) %>
   </div>
 </nav>
diff --git a/test/helpers/pagination_helper_test.rb b/test/helpers/pagination_helper_test.rb
@@ -4,69 +4,93 @@ class PaginationHelperTest < ActionView::TestCase
   include PaginationHelper
 
   test 'Next links for basic search' do
-    @pagination = { next: 12 }
-    query_params = { q: 'popcorn' }
+    @pagination = { prev: 11, next: 13, per_page: 20, hits: 1000, end: 260 }
+    query_params = { q: 'popcorn', page: 12 }
     assert_equal(
-      '<a aria-label="Next page" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?page=12&amp;q=popcorn">Next &raquo;</a>', next_url(query_params)
+      '<a aria-label="Next 20 results" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?page=13&amp;q=popcorn">Next 20 results</a>', next_url(query_params)
     )
   end
 
   test 'Next links for advanced search' do
-    @pagination = { next: 12 }
+    @pagination = { prev: 11, next: 13, per_page: 20, hits: 1000, end: 260 }
     query_params = { q: 'popcorn', title: 'titles are cool', contributors: 'yawn' }
     assert_equal(
-      '<a aria-label="Next page" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?contributors=yawn&amp;page=12&amp;q=popcorn&amp;title=titles+are+cool">Next &raquo;</a>',
+      '<a aria-label="Next 20 results" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?contributors=yawn&amp;page=13&amp;q=popcorn&amp;title=titles+are+cool">Next 20 results</a>',
       next_url(query_params)
     )
   end
 
   test 'Previous links for basic search' do
-    @pagination = { prev: 11 }
-    query_params = { q: 'popcorn' }
+    @pagination = { prev: 11, next: 13, per_page: 20, hits: 1000, end: 260 }
+    query_params = { q: 'popcorn', page: 12 }
     assert_equal(
-      '<a aria-label="Previous page" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?page=11&amp;q=popcorn">&laquo; Previous</a>', prev_url(query_params)
+      '<a aria-label="Previous 20 results" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?page=11&amp;q=popcorn">Previous 20 results</a>', prev_url(query_params)
     )
   end
 
   test 'Previous links for advanced search' do
-    @pagination = { prev: 11 }
-    query_params = { q: 'popcorn', title: 'titles are cool', contributors: 'yawn' }
+    @pagination = { prev: 11, next: 13, per_page: 20, hits: 1000, end: 260 }
+    query_params = { q: 'popcorn', title: 'titles are cool', contributors: 'yawn', page: 12 }
     assert_equal(
-      '<a aria-label="Previous page" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?contributors=yawn&amp;page=11&amp;q=popcorn&amp;title=titles+are+cool">&laquo; Previous</a>',
+      '<a aria-label="Previous 20 results" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?contributors=yawn&amp;page=11&amp;q=popcorn&amp;title=titles+are+cool">Previous 20 results</a>',
       prev_url(query_params)
     )
   end
 
   test 'Next links preserve active tab' do
-    @pagination = { next: 12 }
+    @pagination = { prev: 11, next: 13, per_page: 20, hits: 1000, end: 260 }
     @active_tab = 'primo'
-    query_params = { q: 'popcorn' }
+    query_params = { q: 'popcorn', page: 12 }
     assert_equal(
-      '<a aria-label="Next page" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?page=12&amp;q=popcorn&amp;tab=primo">Next &raquo;</a>', next_url(query_params)
+      '<a aria-label="Next 20 results" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?page=13&amp;q=popcorn&amp;tab=primo">Next 20 results</a>', next_url(query_params)
     )
   end
 
   test 'Previous links preserve active tab' do
-    @pagination = { prev: 11 }
+    @pagination = { prev: 11, next: 13, per_page: 20, hits: 1000, end: 260 }
     @active_tab = 'timdex'
-    query_params = { q: 'popcorn' }
+    query_params = { q: 'popcorn', page: 12 }
     assert_equal(
-      '<a aria-label="Previous page" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?page=11&amp;q=popcorn&amp;tab=timdex">&laquo; Previous</a>', prev_url(query_params)
+      '<a aria-label="Previous 20 results" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?page=11&amp;q=popcorn&amp;tab=timdex">Previous 20 results</a>', prev_url(query_params)
     )
   end
 
-  test 'First links for basic search' do
+  test 'First links for initial basic search is disabled' do
     query_params = { q: 'popcorn' }
     assert_equal(
-      '<a aria-label="First page" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?page=1&amp;q=popcorn">&laquo;&laquo; First</a>', first_url(query_params)
+      '<span role="link" aria-disabled="true" tabindex="-1">First</span>', first_url(query_params)
     )
   end
 
   test 'First links preserve active tab' do
     @active_tab = 'primo'
-    query_params = { q: 'popcorn' }
+    query_params = { q: 'popcorn', page: 5 }
+    assert_equal(
+      '<a aria-label="First" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?page=1&amp;q=popcorn&amp;tab=primo">First</a>', first_url(query_params)
+    )
+  end
+
+  test 'Next link for penultimate page is correct' do
+    @pagination = { next: 6, per_page: 20, hits: 102, end: 100 }
+    query_params = { q: 'popcorn', page: 5 }
+    assert_equal(
+      '<a aria-label="Next 2 results" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?page=6&amp;q=popcorn">Next 2 results</a>', next_url(query_params)
+    )
+  end
+
+  test 'Next link for full last page is disabled' do
+    @pagination = { next: 6, per_page: 20, hits: 100, end: 100 }
+    query_params = { q: 'popcorn', page: 5 }
+    assert_equal(
+      "<span role='link' aria-disabled='true' tabindex='-1'>Next 0 results</span>", next_url(query_params)
+    )
+  end
+
+  test 'Previous link for first page is disabled' do
+    @pagination = { prev: nil, per_page: 20, hits: 100, end: 20 }
+    query_params = { q: 'popcorn', page: 1 }
     assert_equal(
-      '<a aria-label="First page" data-turbo-frame="search-results" data-turbo-action="advance" rel="nofollow" href="/results?page=1&amp;q=popcorn&amp;tab=primo">&laquo;&laquo; First</a>', first_url(query_params)
+      "<span role='link' aria-disabled='true' tabindex='-1'>Previous 20 results</span>", prev_url(query_params)
     )
   end
 end
