From 07f556e789c37ca9b7e01cbf292d56b1ea94e85c Mon Sep 17 00:00:00 2001
From: Domizio Demichelis <dd.nexus@gmail.com>
Date: Sun, 8 Jul 2018 17:17:17 +0200
Subject: [PATCH] fix for "area" typos in bulma extra (#62) and consistency
 improvement across responsive helpers

---
 lib/pagy/extras/bulma.rb                      | 18 ++----
 lib/pagy/extras/javascripts/pagy.js           |  9 ++-
 lib/pagy/extras/responsive.rb                 | 34 ++++++-----
 lib/pagy/extras/templates/nav_bulma.html.erb  |  4 +-
 lib/pagy/extras/templates/nav_bulma.html.haml |  4 +-
 lib/pagy/extras/templates/nav_bulma.html.slim |  4 +-
 test/pagy/extras/bulma_test.rb                | 58 +++++++++----------
 test/pagy/extras/responsive_test.rb           | 35 ++++-------
 8 files changed, 74 insertions(+), 92 deletions(-)

diff --git a/lib/pagy/extras/bulma.rb b/lib/pagy/extras/bulma.rb
index 67eb930a9..12e33d216 100644
--- a/lib/pagy/extras/bulma.rb
+++ b/lib/pagy/extras/bulma.rb
@@ -14,24 +14,14 @@ def pagy_nav_bulma(pagy)
                       : %(<a class="pagination-next" disabled>#{pagy_t('pagy.nav.next')}</a>))
       html << '<ul class="pagination-list">'
       pagy.series.each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
-        html << pagy_nav_bulma_item(link, item)
+        html << if    item.is_a?(Integer); %(<li>#{link.call item, item, %(class="pagination-link" aria-label="goto page #{item}") }</li>)                           # page link
+                elsif item.is_a?(String) ; %(<li>#{link.call item, item, %(class="pagination-link is-current" aria-label="page #{item}" aria-current="page")}</li>)  # active page
+                elsif item == :gap       ; %(<li><span class="pagination-ellipsis">#{pagy_t('pagy.nav.gap')}</span></li>)                                            # page gap
+                end
       end
       html << '</ul>'
       %(<nav class="pagy-nav-bulma pagination is-centered" role="navigation" aria-label="pagination">#{html}</nav>)
     end
 
-    private
-
-    def pagy_nav_bulma_item(link, item)
-      if item.is_a?(Integer)   # page link
-        aria = %( area-label="goto page #{item}")
-        %(<li>#{link.call item, item, 'class="pagination-link"' + aria}</li>)
-      elsif item.is_a?(String) # active page
-        aria = %( area-label="page #{item}" area-current="page")
-        %(<li>#{link.call item, item, 'class="pagination-link is-current"' + aria}</li>)
-      elsif item == :gap       # page gap
-        %(<li><span class="pagination-ellipsis">#{pagy_t('pagy.nav.gap')}</span></li>)
-      end
-    end
   end
 end
diff --git a/lib/pagy/extras/javascripts/pagy.js b/lib/pagy/extras/javascripts/pagy.js
index eaaa39762..3d39e750a 100644
--- a/lib/pagy/extras/javascripts/pagy.js
+++ b/lib/pagy/extras/javascripts/pagy.js
@@ -46,18 +46,17 @@ Pagy.items = function(id, marker, from){
 
 Pagy.responsive = function(id, tags, widths, series){
                     var pagyNav    = document.getElementById('pagy-nav-'+id),
-                        pagyBox    = pagyNav.firstChild || pagyNav,
                         pagyParent = pagyNav.parentElement,
                         lastWidth  = undefined,
                         render     = function(){
                                        var parentWidth = parseInt(pagyParent.clientWidth),
                                            width       = widths.find(function(w){return parentWidth > w});
                                        if (width !== lastWidth) {
-                                         while (pagyBox.firstChild) { pagyBox.removeChild(pagyBox.firstChild) }
-                                         var html = tags['prev'];
+                                         while (pagyNav.firstChild) { pagyNav.removeChild(pagyNav.firstChild) }
+                                         var html = tags['before'];
                                          series[width].forEach(function(item){html += tags[item]});
-                                         html += tags['next'];
-                                         pagyBox.insertAdjacentHTML('beforeend', html);
+                                         html += tags['after'];
+                                         pagyNav.insertAdjacentHTML('beforeend', html);
                                          lastWidth = width;
                                        }
                                      }.bind(this);
diff --git a/lib/pagy/extras/responsive.rb b/lib/pagy/extras/responsive.rb
index 298a1d747..a7da4c57a 100644
--- a/lib/pagy/extras/responsive.rb
+++ b/lib/pagy/extras/responsive.rb
@@ -36,16 +36,16 @@ module Frontend
     def pagy_nav_responsive(pagy, id=caller(1,1)[0].hash)
       tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.responsive
 
-      tags['prev'] = (p_prev ? %(<span class="page prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</span> )
-                             : %(<span class="page prev disabled">#{pagy_t('pagy.nav.prev')}</span> ))
+      tags['before'] = (p_prev ? %(<span class="page prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</span> )
+                               : %(<span class="page prev disabled">#{pagy_t('pagy.nav.prev')}</span> ))
       responsive[:items].each do |item|  # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
         tags[item.to_s] = if    item.is_a?(Integer); %(<span class="page">#{link.call item}</span> )             # page link
                           elsif item.is_a?(String) ; %(<span class="page active">#{item}</span> )                # current page
                           elsif item == :gap       ; %(<span class="page gap">#{pagy_t('pagy.nav.gap')}</span> ) # page gap
                           end
       end
-      tags['next'] = (p_next ? %(<span class="page next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</span>)
-                             : %(<span class="page next disabled">#{pagy_t('pagy.nav.next')}</span>))
+      tags['after'] = (p_next ? %(<span class="page next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</span>)
+                              : %(<span class="page next disabled">#{pagy_t('pagy.nav.next')}</span>))
       script = %(<script type="application/json" class="pagy-responsive-json">["#{id}", #{tags.to_json},  #{responsive[:widths].to_json}, #{responsive[:series].to_json}]</script>)
       %(<nav id="pagy-nav-#{id}" class="pagy-nav-responsive pagination" role="navigation" aria-label="pager"></nav>#{script})
     end
@@ -55,18 +55,20 @@ def pagy_nav_responsive(pagy, id=caller(1,1)[0].hash)
     def pagy_nav_responsive_bootstrap(pagy, id=caller(1,1)[0].hash)
       tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy, 'class="page-link"'), pagy.prev, pagy.next, pagy.responsive
 
-      tags['prev'] = (p_prev ? %(<li class="page-item prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</li>)
-                             : %(<li class="page-item prev disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.prev')}</a></li>))
+      tags['before'] = +'<ul class="pagination">'
+      tags['before'] << (p_prev ? %(<li class="page-item prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</li>)
+                               : %(<li class="page-item prev disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.prev')}</a></li>))
       responsive[:items].each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
         tags[item.to_s] = if    item.is_a?(Integer); %(<li class="page-item">#{link.call item}</li>)                                                        # page link
                           elsif item.is_a?(String) ; %(<li class="page-item active">#{link.call item}</li>)                                                 # active page
                           elsif item == :gap       ; %(<li class="page-item gap disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.gap')}</a></li>) # page gap
                           end
       end
-      tags['next'] = (p_next ? %(<li class="page-item next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</li>)
-                             : %(<li class="page-item next disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.next')}</a></li>))
+      tags['after'] = +(p_next ? %(<li class="page-item next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</li>)
+                               : %(<li class="page-item next disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.next')}</a></li>))
+      tags['after'] << '</ul>'
       script = %(<script type="application/json" class="pagy-responsive-json">["#{id}", #{tags.to_json},  #{responsive[:widths].to_json}, #{responsive[:series].to_json}]</script>)
-      %(<nav id="pagy-nav-#{id}" class="pagy-nav-responsive-bootstrap pagination" role="navigation" aria-label="pager"><ul class="pagination"></ul></nav>#{script})
+      %(<nav id="pagy-nav-#{id}" class="pagy-nav-responsive-bootstrap pagination" role="navigation" aria-label="pager"></nav>#{script})
     end
 
     # Responsive pagination for Bulma: it returns the html with the series of links to the pages
@@ -74,16 +76,18 @@ def pagy_nav_responsive_bootstrap(pagy, id=caller(1,1)[0].hash)
     def pagy_nav_responsive_bulma(pagy, id=caller(1,1)[0].hash)
       tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.responsive
 
-      tags['prev'] = (p_prev ? %(#{link.call(p_prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"')}<ul class="pagination-list">)
-                             : %(<a class="pagination-previous" disabled>#{pagy_t('pagy.nav.prev')}</a><ul class="pagination-list">))
+      tags['before'] = +(p_prev ? link.call(p_prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"')
+                                : %(<a class="pagination-previous" disabled>#{pagy_t('pagy.nav.prev')}</a>))
+      tags['before'] << (p_next ? link.call(p_next, pagy_t('pagy.nav.next'), 'class="pagination-next" aria-label="next page"')
+                                : %(<a class="pagination-next" disabled>#{pagy_t('pagy.nav.next')}</a>))
+      tags['before'] << '<ul class="pagination-list">'
       responsive[:items].each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
-        tags[item.to_s] = if    item.is_a?(Integer); %(<li>#{link.call item, item, 'class="pagination-link" area-label="goto page '+item.to_s+'"'}</li>)
-                          elsif item.is_a?(String) ; %(<li>#{link.call item, item, 'class="pagination-link is-current" area-current="page" area-label="page '+item.to_s+'"'}</li>)
+        tags[item.to_s] = if    item.is_a?(Integer); %(<li>#{link.call item, item, %(class="pagination-link" aria-label="goto page #{item}")}</li>)
+                          elsif item.is_a?(String) ; %(<li>#{link.call item, item, %(class="pagination-link is-current" aria-current="page" aria-label="page #{item}")}</li>)
                           elsif item == :gap       ; %(<li><span class="pagination-ellipsis">#{pagy_t('pagy.nav.gap')}</span></li>)
                           end
       end
-      tags['next'] = (p_next ? %(</ul>#{link.call(p_next, pagy_t('pagy.nav.next'), 'class="pagination-next" aria-label="next page"')})
-                             : %(</ul><a class="pagination-next" disabled>#{pagy_t('pagy.nav.next')}</a>))
+      tags['after'] = '</ul>'
       script = %(<script type="application/json" class="pagy-responsive-json">["#{id}", #{tags.to_json},  #{responsive[:widths].to_json}, #{responsive[:series].to_json}]</script>)
       %(<nav id="pagy-nav-#{id}" class="pagy-nav-bulma pagination is-centered" role="navigation" aria-label="pagination"></nav>#{script})
     end
diff --git a/lib/pagy/extras/templates/nav_bulma.html.erb b/lib/pagy/extras/templates/nav_bulma.html.erb
index 6c9a57eeb..1b4926a17 100644
--- a/lib/pagy/extras/templates/nav_bulma.html.erb
+++ b/lib/pagy/extras/templates/nav_bulma.html.erb
@@ -15,8 +15,8 @@
 <% end                         -%>
 <%#                            -%>  <ul class="pagination-list">
 <% pagy.series.each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36] -%>
-<%   if    item.is_a?(Integer) -%>    <li><%== link.call item, item, %(class="pagination-link" area-label="goto page #{item}") %></li>
-<%   elsif item.is_a?(String)  -%>    <li><%== link.call item, item, %(class="pagination-link is-current" area-label="page #{item}" area-current="page") %></li>
+<%   if    item.is_a?(Integer) -%>    <li><%== link.call item, item, %(class="pagination-link" aria-label="goto page #{item}") %></li>
+<%   elsif item.is_a?(String)  -%>    <li><%== link.call item, item, %(class="pagination-link is-current" aria-label="page #{item}" aria-current="page") %></li>
 <%   elsif item == :gap        -%>    <li><span class="pagination-ellipsis"><%== pagy_t('pagy.nav.gap') %></span></li>
 <%   end                       -%>
 <% end                         -%>
diff --git a/lib/pagy/extras/templates/nav_bulma.html.haml b/lib/pagy/extras/templates/nav_bulma.html.haml
index 61d73e529..8652fa967 100644
--- a/lib/pagy/extras/templates/nav_bulma.html.haml
+++ b/lib/pagy/extras/templates/nav_bulma.html.haml
@@ -22,10 +22,10 @@
 
     - pagy.series.each do |item|                      # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
       - if item.is_a?(Integer)                        # page link
-        %li!= link.call item, item, %(class="pagination-link" area-label="goto page #{item}")
+        %li!= link.call item, item, %(class="pagination-link" aria-label="goto page #{item}")
 
       - elsif item.is_a?(String)                      # current page
-        %li!= link.call item, item, %(class="pagination-link is-current" area-label="page #{item}" area-current="page")
+        %li!= link.call item, item, %(class="pagination-link is-current" aria-label="page #{item}" aria-current="page")
 
       - elsif item == :gap                            # page gap
         %li
diff --git a/lib/pagy/extras/templates/nav_bulma.html.slim b/lib/pagy/extras/templates/nav_bulma.html.slim
index ddaaaead1..39f9a78cd 100644
--- a/lib/pagy/extras/templates/nav_bulma.html.slim
+++ b/lib/pagy/extras/templates/nav_bulma.html.slim
@@ -22,10 +22,10 @@ nav.pagy-nav-bulma.pagination.is-centered role="navigation" aria-label="paginati
 
     - pagy.series.each do |item|                 # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
       - if item.is_a?(Integer)                   # page link
-        li == link.call item, item, %(class="pagination-link" area-label="goto page #{item}")
+        li == link.call item, item, %(class="pagination-link" aria-label="goto page #{item}")
 
       - elsif item.is_a?(String)                 # current page
-        li == link.call item, item, %(class="pagination-link is-current" area-label="page #{item}" area-current="page")
+        li == link.call item, item, %(class="pagination-link is-current" aria-label="page #{item}" aria-current="page")
 
       - elsif item == :gap                       # page gap
         li
diff --git a/test/pagy/extras/bulma_test.rb b/test/pagy/extras/bulma_test.rb
index 9b1e5096d..fd7d43611 100644
--- a/test/pagy/extras/bulma_test.rb
+++ b/test/pagy/extras/bulma_test.rb
@@ -20,12 +20,12 @@
           '<a class="pagination-previous" disabled>&lsaquo;&nbsp;Prev</a>' \
           '<a href="/foo?page=2"   rel="next" class="pagination-next" aria-label="next page">Next&nbsp;&rsaquo;</a>' \
           '<ul class="pagination-list">' \
-            '<li><a href="/foo?page=1"   class="pagination-link is-current" area-label="page 1" area-current="page">1</a></li>' \
-            '<li><a href="/foo?page=2"   rel="next" class="pagination-link" area-label="goto page 2">2</a></li>' \
-            '<li><a href="/foo?page=3"   class="pagination-link" area-label="goto page 3">3</a></li>' \
-            '<li><a href="/foo?page=4"   class="pagination-link" area-label="goto page 4">4</a></li>' \
-            '<li><a href="/foo?page=5"   class="pagination-link" area-label="goto page 5">5</a></li>' \
-            '<li><a href="/foo?page=6"   class="pagination-link" area-label="goto page 6">6</a></li>' \
+            '<li><a href="/foo?page=1"   class="pagination-link is-current" aria-label="page 1" aria-current="page">1</a></li>' \
+            '<li><a href="/foo?page=2"   rel="next" class="pagination-link" aria-label="goto page 2">2</a></li>' \
+            '<li><a href="/foo?page=3"   class="pagination-link" aria-label="goto page 3">3</a></li>' \
+            '<li><a href="/foo?page=4"   class="pagination-link" aria-label="goto page 4">4</a></li>' \
+            '<li><a href="/foo?page=5"   class="pagination-link" aria-label="goto page 5">5</a></li>' \
+            '<li><a href="/foo?page=6"   class="pagination-link" aria-label="goto page 6">6</a></li>' \
           '</ul>' \
         '</nav>'
     end
@@ -37,12 +37,12 @@
           '<a href="/foo?page=2"   rel="prev" class="pagination-previous" aria-label="previous page">&lsaquo;&nbsp;Prev</a>' \
           '<a href="/foo?page=4"   rel="next" class="pagination-next" aria-label="next page">Next&nbsp;&rsaquo;</a>' \
           '<ul class="pagination-list">' \
-            '<li><a href="/foo?page=1"   class="pagination-link" area-label="goto page 1">1</a></li>' \
-            '<li><a href="/foo?page=2"   rel="prev" class="pagination-link" area-label="goto page 2">2</a></li>' \
-            '<li><a href="/foo?page=3"   class="pagination-link is-current" area-label="page 3" area-current="page">3</a></li>' \
-            '<li><a href="/foo?page=4"   rel="next" class="pagination-link" area-label="goto page 4">4</a></li>' \
-            '<li><a href="/foo?page=5"   class="pagination-link" area-label="goto page 5">5</a></li>' \
-            '<li><a href="/foo?page=6"   class="pagination-link" area-label="goto page 6">6</a></li>' \
+            '<li><a href="/foo?page=1"   class="pagination-link" aria-label="goto page 1">1</a></li>' \
+            '<li><a href="/foo?page=2"   rel="prev" class="pagination-link" aria-label="goto page 2">2</a></li>' \
+            '<li><a href="/foo?page=3"   class="pagination-link is-current" aria-label="page 3" aria-current="page">3</a></li>' \
+            '<li><a href="/foo?page=4"   rel="next" class="pagination-link" aria-label="goto page 4">4</a></li>' \
+            '<li><a href="/foo?page=5"   class="pagination-link" aria-label="goto page 5">5</a></li>' \
+            '<li><a href="/foo?page=6"   class="pagination-link" aria-label="goto page 6">6</a></li>' \
           '</ul>' \
         '</nav>'
     end
@@ -55,12 +55,12 @@
           '<a href="/foo?page=5"   rel="prev" class="pagination-previous" aria-label="previous page">&lsaquo;&nbsp;Prev</a>' \
           '<a class="pagination-next" disabled>Next&nbsp;&rsaquo;</a>' \
           '<ul class="pagination-list">' \
-            '<li><a href="/foo?page=1"   class="pagination-link" area-label="goto page 1">1</a></li>' \
-            '<li><a href="/foo?page=2"   class="pagination-link" area-label="goto page 2">2</a></li>' \
-            '<li><a href="/foo?page=3"   class="pagination-link" area-label="goto page 3">3</a></li>' \
-            '<li><a href="/foo?page=4"   class="pagination-link" area-label="goto page 4">4</a></li>' \
-            '<li><a href="/foo?page=5"   rel="prev" class="pagination-link" area-label="goto page 5">5</a></li>' \
-            '<li><a href="/foo?page=6"   class="pagination-link is-current" area-label="page 6" area-current="page">6</a></li>' \
+            '<li><a href="/foo?page=1"   class="pagination-link" aria-label="goto page 1">1</a></li>' \
+            '<li><a href="/foo?page=2"   class="pagination-link" aria-label="goto page 2">2</a></li>' \
+            '<li><a href="/foo?page=3"   class="pagination-link" aria-label="goto page 3">3</a></li>' \
+            '<li><a href="/foo?page=4"   class="pagination-link" aria-label="goto page 4">4</a></li>' \
+            '<li><a href="/foo?page=5"   rel="prev" class="pagination-link" aria-label="goto page 5">5</a></li>' \
+            '<li><a href="/foo?page=6"   class="pagination-link is-current" aria-label="page 6" aria-current="page">6</a></li>' \
           '</ul>' \
         '</nav>'
     end
@@ -73,19 +73,19 @@
           '<a href="/foo?page=9"   rel="prev" class="pagination-previous" aria-label="previous page">&lsaquo;&nbsp;Prev</a>' \
           '<a href="/foo?page=11"   rel="next" class="pagination-next" aria-label="next page">Next&nbsp;&rsaquo;</a>' \
           '<ul class="pagination-list">' \
-            '<li><a href="/foo?page=1"   class="pagination-link" area-label="goto page 1">1</a></li>' \
+            '<li><a href="/foo?page=1"   class="pagination-link" aria-label="goto page 1">1</a></li>' \
             '<li><span class="pagination-ellipsis">&hellip;</span></li>' \
-            '<li><a href="/foo?page=6"   class="pagination-link" area-label="goto page 6">6</a></li>' \
-            '<li><a href="/foo?page=7"   class="pagination-link" area-label="goto page 7">7</a></li>' \
-            '<li><a href="/foo?page=8"   class="pagination-link" area-label="goto page 8">8</a></li>' \
-            '<li><a href="/foo?page=9"   rel="prev" class="pagination-link" area-label="goto page 9">9</a></li>' \
-            '<li><a href="/foo?page=10"   class="pagination-link is-current" area-label="page 10" area-current="page">10</a></li>' \
-            '<li><a href="/foo?page=11"   rel="next" class="pagination-link" area-label="goto page 11">11</a></li>' \
-            '<li><a href="/foo?page=12"   class="pagination-link" area-label="goto page 12">12</a></li>' \
-            '<li><a href="/foo?page=13"   class="pagination-link" area-label="goto page 13">13</a></li>' \
-            '<li><a href="/foo?page=14"   class="pagination-link" area-label="goto page 14">14</a></li>' \
+            '<li><a href="/foo?page=6"   class="pagination-link" aria-label="goto page 6">6</a></li>' \
+            '<li><a href="/foo?page=7"   class="pagination-link" aria-label="goto page 7">7</a></li>' \
+            '<li><a href="/foo?page=8"   class="pagination-link" aria-label="goto page 8">8</a></li>' \
+            '<li><a href="/foo?page=9"   rel="prev" class="pagination-link" aria-label="goto page 9">9</a></li>' \
+            '<li><a href="/foo?page=10"   class="pagination-link is-current" aria-label="page 10" aria-current="page">10</a></li>' \
+            '<li><a href="/foo?page=11"   rel="next" class="pagination-link" aria-label="goto page 11">11</a></li>' \
+            '<li><a href="/foo?page=12"   class="pagination-link" aria-label="goto page 12">12</a></li>' \
+            '<li><a href="/foo?page=13"   class="pagination-link" aria-label="goto page 13">13</a></li>' \
+            '<li><a href="/foo?page=14"   class="pagination-link" aria-label="goto page 14">14</a></li>' \
             '<li><span class="pagination-ellipsis">&hellip;</span></li>' \
-            '<li><a href="/foo?page=50"   class="pagination-link" area-label="goto page 50">50</a></li>' \
+            '<li><a href="/foo?page=50"   class="pagination-link" aria-label="goto page 50">50</a></li>' \
           '</ul>' \
         '</nav>'
     end
diff --git a/test/pagy/extras/responsive_test.rb b/test/pagy/extras/responsive_test.rb
index 33f60f952..74d88dc8a 100644
--- a/test/pagy/extras/responsive_test.rb
+++ b/test/pagy/extras/responsive_test.rb
@@ -17,30 +17,26 @@
       pagy, _  = @array.pagy(1)
       html, id = frontend.pagy_nav_responsive(pagy), caller(0,1)[0].hash
       html.must_equal \
-        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive pagination\" role=\"navigation\" aria-label=\"pager\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<span class=\\\"page prev disabled\\\">&lsaquo;&nbsp;Prev</span> \",\"1\":\"<span class=\\\"page active\\\">1</span> \",\"2\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=2\\\"   rel=\\\"next\\\" >2</a></span> \",\"3\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=3\\\"   >3</a></span> \",\"4\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=4\\\"   >4</a></span> \",\"5\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=5\\\"   >5</a></span> \",\"6\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=6\\\"   >6</a></span> \",\"next\":\"<span class=\\\"page next\\\"><a href=\\\"/foo?page=2\\\"   rel=\\\"next\\\" aria-label=\\\"next\\\">Next&nbsp;&rsaquo;</a></span>\"},  [0], {\"0\":[\"1\",2,3,4,5,6]}]</script>"
-    end
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive pagination\" role=\"navigation\" aria-label=\"pager\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"before\":\"<span class=\\\"page prev disabled\\\">&lsaquo;&nbsp;Prev</span> \",\"1\":\"<span class=\\\"page active\\\">1</span> \",\"2\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=2\\\"   rel=\\\"next\\\" >2</a></span> \",\"3\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=3\\\"   >3</a></span> \",\"4\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=4\\\"   >4</a></span> \",\"5\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=5\\\"   >5</a></span> \",\"6\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=6\\\"   >6</a></span> \",\"after\":\"<span class=\\\"page next\\\"><a href=\\\"/foo?page=2\\\"   rel=\\\"next\\\" aria-label=\\\"next\\\">Next&nbsp;&rsaquo;</a></span>\"},  [0], {\"0\":[\"1\",2,3,4,5,6]}]</script>"    end
 
     it 'renders page 3' do
       pagy, _  = @array.pagy(3)
       html, id = frontend.pagy_nav_responsive(pagy), caller(0,1)[0].hash
       html.must_equal \
-        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive pagination\" role=\"navigation\" aria-label=\"pager\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<span class=\\\"page prev\\\"><a href=\\\"/foo?page=2\\\"   rel=\\\"prev\\\" aria-label=\\\"previous\\\">&lsaquo;&nbsp;Prev</a></span> \",\"1\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=1\\\"   >1</a></span> \",\"2\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=2\\\"   rel=\\\"prev\\\" >2</a></span> \",\"3\":\"<span class=\\\"page active\\\">3</span> \",\"4\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=4\\\"   rel=\\\"next\\\" >4</a></span> \",\"5\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=5\\\"   >5</a></span> \",\"6\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=6\\\"   >6</a></span> \",\"next\":\"<span class=\\\"page next\\\"><a href=\\\"/foo?page=4\\\"   rel=\\\"next\\\" aria-label=\\\"next\\\">Next&nbsp;&rsaquo;</a></span>\"},  [0], {\"0\":[1,2,\"3\",4,5,6]}]</script>"
-    end
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive pagination\" role=\"navigation\" aria-label=\"pager\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"before\":\"<span class=\\\"page prev\\\"><a href=\\\"/foo?page=2\\\"   rel=\\\"prev\\\" aria-label=\\\"previous\\\">&lsaquo;&nbsp;Prev</a></span> \",\"1\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=1\\\"   >1</a></span> \",\"2\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=2\\\"   rel=\\\"prev\\\" >2</a></span> \",\"3\":\"<span class=\\\"page active\\\">3</span> \",\"4\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=4\\\"   rel=\\\"next\\\" >4</a></span> \",\"5\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=5\\\"   >5</a></span> \",\"6\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=6\\\"   >6</a></span> \",\"after\":\"<span class=\\\"page next\\\"><a href=\\\"/foo?page=4\\\"   rel=\\\"next\\\" aria-label=\\\"next\\\">Next&nbsp;&rsaquo;</a></span>\"},  [0], {\"0\":[1,2,\"3\",4,5,6]}]</script>"    end
 
     it 'renders page 6' do
       pagy, _ = @array.pagy(6)
       html, id = frontend.pagy_nav_responsive(pagy), caller(0,1)[0].hash
       html.must_equal \
-        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive pagination\" role=\"navigation\" aria-label=\"pager\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<span class=\\\"page prev\\\"><a href=\\\"/foo?page=5\\\"   rel=\\\"prev\\\" aria-label=\\\"previous\\\">&lsaquo;&nbsp;Prev</a></span> \",\"1\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=1\\\"   >1</a></span> \",\"2\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=2\\\"   >2</a></span> \",\"3\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=3\\\"   >3</a></span> \",\"4\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=4\\\"   >4</a></span> \",\"5\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=5\\\"   rel=\\\"prev\\\" >5</a></span> \",\"6\":\"<span class=\\\"page active\\\">6</span> \",\"next\":\"<span class=\\\"page next disabled\\\">Next&nbsp;&rsaquo;</span>\"},  [0], {\"0\":[1,2,3,4,5,\"6\"]}]</script>"
-    end
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive pagination\" role=\"navigation\" aria-label=\"pager\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"before\":\"<span class=\\\"page prev\\\"><a href=\\\"/foo?page=5\\\"   rel=\\\"prev\\\" aria-label=\\\"previous\\\">&lsaquo;&nbsp;Prev</a></span> \",\"1\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=1\\\"   >1</a></span> \",\"2\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=2\\\"   >2</a></span> \",\"3\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=3\\\"   >3</a></span> \",\"4\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=4\\\"   >4</a></span> \",\"5\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=5\\\"   rel=\\\"prev\\\" >5</a></span> \",\"6\":\"<span class=\\\"page active\\\">6</span> \",\"after\":\"<span class=\\\"page next disabled\\\">Next&nbsp;&rsaquo;</span>\"},  [0], {\"0\":[1,2,3,4,5,\"6\"]}]</script>"    end
 
     it 'renders page 10' do
       @array   = (1..1000).to_a.extend(Pagy::Array::PageMethod)
       pagy, _  = @array.pagy(10)
       html, id = frontend.pagy_nav_responsive(pagy), caller(0,1)[0].hash
       html.must_equal \
-        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive pagination\" role=\"navigation\" aria-label=\"pager\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<span class=\\\"page prev\\\"><a href=\\\"/foo?page=9\\\"   rel=\\\"prev\\\" aria-label=\\\"previous\\\">&lsaquo;&nbsp;Prev</a></span> \",\"1\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=1\\\"   >1</a></span> \",\"gap\":\"<span class=\\\"page gap\\\">&hellip;</span> \",\"6\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=6\\\"   >6</a></span> \",\"7\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=7\\\"   >7</a></span> \",\"8\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=8\\\"   >8</a></span> \",\"9\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=9\\\"   rel=\\\"prev\\\" >9</a></span> \",\"10\":\"<span class=\\\"page active\\\">10</span> \",\"11\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=11\\\"   rel=\\\"next\\\" >11</a></span> \",\"12\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=12\\\"   >12</a></span> \",\"13\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=13\\\"   >13</a></span> \",\"14\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=14\\\"   >14</a></span> \",\"50\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=50\\\"   >50</a></span> \",\"next\":\"<span class=\\\"page next\\\"><a href=\\\"/foo?page=11\\\"   rel=\\\"next\\\" aria-label=\\\"next\\\">Next&nbsp;&rsaquo;</a></span>\"},  [0], {\"0\":[1,\"gap\",6,7,8,9,\"10\",11,12,13,14,\"gap\",50]}]</script>"
-    end
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive pagination\" role=\"navigation\" aria-label=\"pager\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"before\":\"<span class=\\\"page prev\\\"><a href=\\\"/foo?page=9\\\"   rel=\\\"prev\\\" aria-label=\\\"previous\\\">&lsaquo;&nbsp;Prev</a></span> \",\"1\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=1\\\"   >1</a></span> \",\"gap\":\"<span class=\\\"page gap\\\">&hellip;</span> \",\"6\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=6\\\"   >6</a></span> \",\"7\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=7\\\"   >7</a></span> \",\"8\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=8\\\"   >8</a></span> \",\"9\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=9\\\"   rel=\\\"prev\\\" >9</a></span> \",\"10\":\"<span class=\\\"page active\\\">10</span> \",\"11\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=11\\\"   rel=\\\"next\\\" >11</a></span> \",\"12\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=12\\\"   >12</a></span> \",\"13\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=13\\\"   >13</a></span> \",\"14\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=14\\\"   >14</a></span> \",\"50\":\"<span class=\\\"page\\\"><a href=\\\"/foo?page=50\\\"   >50</a></span> \",\"after\":\"<span class=\\\"page next\\\"><a href=\\\"/foo?page=11\\\"   rel=\\\"next\\\" aria-label=\\\"next\\\">Next&nbsp;&rsaquo;</a></span>\"},  [0], {\"0\":[1,\"gap\",6,7,8,9,\"10\",11,12,13,14,\"gap\",50]}]</script>"    end
 
   end
 
@@ -54,30 +50,27 @@
       pagy, _  = @array.pagy(1)
       html, id = frontend.pagy_nav_responsive_bootstrap(pagy), caller(0,1)[0].hash
       html.must_equal \
-        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive-bootstrap pagination\" role=\"navigation\" aria-label=\"pager\"><ul class=\"pagination\"></ul></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<li class=\\\"page-item prev disabled\\\"><a href=\\\"#\\\" class=\\\"page-link\\\">&lsaquo;&nbsp;Prev</a></li>\",\"1\":\"<li class=\\\"page-item active\\\"><a href=\\\"/foo?page=1\\\"  class=\\\"page-link\\\" >1</a></li>\",\"2\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=2\\\"  class=\\\"page-link\\\" rel=\\\"next\\\" >2</a></li>\",\"3\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=3\\\"  class=\\\"page-link\\\" >3</a></li>\",\"4\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=4\\\"  class=\\\"page-link\\\" >4</a></li>\",\"5\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=5\\\"  class=\\\"page-link\\\" >5</a></li>\",\"6\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=6\\\"  class=\\\"page-link\\\" >6</a></li>\",\"next\":\"<li class=\\\"page-item next\\\"><a href=\\\"/foo?page=2\\\"  class=\\\"page-link\\\" rel=\\\"next\\\" aria-label=\\\"next\\\">Next&nbsp;&rsaquo;</a></li>\"},  [0], {\"0\":[\"1\",2,3,4,5,6]}]</script>"
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive-bootstrap pagination\" role=\"navigation\" aria-label=\"pager\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"before\":\"<ul class=\\\"pagination\\\"><li class=\\\"page-item prev disabled\\\"><a href=\\\"#\\\" class=\\\"page-link\\\">&lsaquo;&nbsp;Prev</a></li>\",\"1\":\"<li class=\\\"page-item active\\\"><a href=\\\"/foo?page=1\\\"  class=\\\"page-link\\\" >1</a></li>\",\"2\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=2\\\"  class=\\\"page-link\\\" rel=\\\"next\\\" >2</a></li>\",\"3\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=3\\\"  class=\\\"page-link\\\" >3</a></li>\",\"4\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=4\\\"  class=\\\"page-link\\\" >4</a></li>\",\"5\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=5\\\"  class=\\\"page-link\\\" >5</a></li>\",\"6\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=6\\\"  class=\\\"page-link\\\" >6</a></li>\",\"after\":\"<li class=\\\"page-item next\\\"><a href=\\\"/foo?page=2\\\"  class=\\\"page-link\\\" rel=\\\"next\\\" aria-label=\\\"next\\\">Next&nbsp;&rsaquo;</a></li></ul>\"},  [0], {\"0\":[\"1\",2,3,4,5,6]}]</script>"
     end
 
     it 'renders page 3 for bootstrap' do
       pagy, _  = @array.pagy(3)
       html, id = frontend.pagy_nav_responsive_bootstrap(pagy), caller(0,1)[0].hash
       html.must_equal \
-        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive-bootstrap pagination\" role=\"navigation\" aria-label=\"pager\"><ul class=\"pagination\"></ul></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<li class=\\\"page-item prev\\\"><a href=\\\"/foo?page=2\\\"  class=\\\"page-link\\\" rel=\\\"prev\\\" aria-label=\\\"previous\\\">&lsaquo;&nbsp;Prev</a></li>\",\"1\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=1\\\"  class=\\\"page-link\\\" >1</a></li>\",\"2\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=2\\\"  class=\\\"page-link\\\" rel=\\\"prev\\\" >2</a></li>\",\"3\":\"<li class=\\\"page-item active\\\"><a href=\\\"/foo?page=3\\\"  class=\\\"page-link\\\" >3</a></li>\",\"4\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=4\\\"  class=\\\"page-link\\\" rel=\\\"next\\\" >4</a></li>\",\"5\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=5\\\"  class=\\\"page-link\\\" >5</a></li>\",\"6\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=6\\\"  class=\\\"page-link\\\" >6</a></li>\",\"next\":\"<li class=\\\"page-item next\\\"><a href=\\\"/foo?page=4\\\"  class=\\\"page-link\\\" rel=\\\"next\\\" aria-label=\\\"next\\\">Next&nbsp;&rsaquo;</a></li>\"},  [0], {\"0\":[1,2,\"3\",4,5,6]}]</script>"
-    end
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive-bootstrap pagination\" role=\"navigation\" aria-label=\"pager\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"before\":\"<ul class=\\\"pagination\\\"><li class=\\\"page-item prev\\\"><a href=\\\"/foo?page=2\\\"  class=\\\"page-link\\\" rel=\\\"prev\\\" aria-label=\\\"previous\\\">&lsaquo;&nbsp;Prev</a></li>\",\"1\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=1\\\"  class=\\\"page-link\\\" >1</a></li>\",\"2\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=2\\\"  class=\\\"page-link\\\" rel=\\\"prev\\\" >2</a></li>\",\"3\":\"<li class=\\\"page-item active\\\"><a href=\\\"/foo?page=3\\\"  class=\\\"page-link\\\" >3</a></li>\",\"4\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=4\\\"  class=\\\"page-link\\\" rel=\\\"next\\\" >4</a></li>\",\"5\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=5\\\"  class=\\\"page-link\\\" >5</a></li>\",\"6\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=6\\\"  class=\\\"page-link\\\" >6</a></li>\",\"after\":\"<li class=\\\"page-item next\\\"><a href=\\\"/foo?page=4\\\"  class=\\\"page-link\\\" rel=\\\"next\\\" aria-label=\\\"next\\\">Next&nbsp;&rsaquo;</a></li></ul>\"},  [0], {\"0\":[1,2,\"3\",4,5,6]}]</script>"    end
 
     it 'renders page 6 for bootstrap' do
       pagy, _  = @array.pagy(6)
       html, id = frontend.pagy_nav_responsive_bootstrap(pagy), caller(0,1)[0].hash
       html.must_equal \
-        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive-bootstrap pagination\" role=\"navigation\" aria-label=\"pager\"><ul class=\"pagination\"></ul></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<li class=\\\"page-item prev\\\"><a href=\\\"/foo?page=5\\\"  class=\\\"page-link\\\" rel=\\\"prev\\\" aria-label=\\\"previous\\\">&lsaquo;&nbsp;Prev</a></li>\",\"1\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=1\\\"  class=\\\"page-link\\\" >1</a></li>\",\"2\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=2\\\"  class=\\\"page-link\\\" >2</a></li>\",\"3\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=3\\\"  class=\\\"page-link\\\" >3</a></li>\",\"4\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=4\\\"  class=\\\"page-link\\\" >4</a></li>\",\"5\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=5\\\"  class=\\\"page-link\\\" rel=\\\"prev\\\" >5</a></li>\",\"6\":\"<li class=\\\"page-item active\\\"><a href=\\\"/foo?page=6\\\"  class=\\\"page-link\\\" >6</a></li>\",\"next\":\"<li class=\\\"page-item next disabled\\\"><a href=\\\"#\\\" class=\\\"page-link\\\">Next&nbsp;&rsaquo;</a></li>\"},  [0], {\"0\":[1,2,3,4,5,\"6\"]}]</script>"
-    end
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive-bootstrap pagination\" role=\"navigation\" aria-label=\"pager\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"before\":\"<ul class=\\\"pagination\\\"><li class=\\\"page-item prev\\\"><a href=\\\"/foo?page=5\\\"  class=\\\"page-link\\\" rel=\\\"prev\\\" aria-label=\\\"previous\\\">&lsaquo;&nbsp;Prev</a></li>\",\"1\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=1\\\"  class=\\\"page-link\\\" >1</a></li>\",\"2\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=2\\\"  class=\\\"page-link\\\" >2</a></li>\",\"3\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=3\\\"  class=\\\"page-link\\\" >3</a></li>\",\"4\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=4\\\"  class=\\\"page-link\\\" >4</a></li>\",\"5\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=5\\\"  class=\\\"page-link\\\" rel=\\\"prev\\\" >5</a></li>\",\"6\":\"<li class=\\\"page-item active\\\"><a href=\\\"/foo?page=6\\\"  class=\\\"page-link\\\" >6</a></li>\",\"after\":\"<li class=\\\"page-item next disabled\\\"><a href=\\\"#\\\" class=\\\"page-link\\\">Next&nbsp;&rsaquo;</a></li></ul>\"},  [0], {\"0\":[1,2,3,4,5,\"6\"]}]</script>"    end
 
     it 'renders page 10 for bootstrap' do
       @array   = (1..1000).to_a.extend(Pagy::Array::PageMethod)
       pagy, _  = @array.pagy(10)
       html, id = frontend.pagy_nav_responsive_bootstrap(pagy), caller(0,1)[0].hash
       html.must_equal \
-        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive-bootstrap pagination\" role=\"navigation\" aria-label=\"pager\"><ul class=\"pagination\"></ul></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<li class=\\\"page-item prev\\\"><a href=\\\"/foo?page=9\\\"  class=\\\"page-link\\\" rel=\\\"prev\\\" aria-label=\\\"previous\\\">&lsaquo;&nbsp;Prev</a></li>\",\"1\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=1\\\"  class=\\\"page-link\\\" >1</a></li>\",\"gap\":\"<li class=\\\"page-item gap disabled\\\"><a href=\\\"#\\\" class=\\\"page-link\\\">&hellip;</a></li>\",\"6\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=6\\\"  class=\\\"page-link\\\" >6</a></li>\",\"7\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=7\\\"  class=\\\"page-link\\\" >7</a></li>\",\"8\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=8\\\"  class=\\\"page-link\\\" >8</a></li>\",\"9\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=9\\\"  class=\\\"page-link\\\" rel=\\\"prev\\\" >9</a></li>\",\"10\":\"<li class=\\\"page-item active\\\"><a href=\\\"/foo?page=10\\\"  class=\\\"page-link\\\" >10</a></li>\",\"11\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=11\\\"  class=\\\"page-link\\\" rel=\\\"next\\\" >11</a></li>\",\"12\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=12\\\"  class=\\\"page-link\\\" >12</a></li>\",\"13\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=13\\\"  class=\\\"page-link\\\" >13</a></li>\",\"14\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=14\\\"  class=\\\"page-link\\\" >14</a></li>\",\"50\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=50\\\"  class=\\\"page-link\\\" >50</a></li>\",\"next\":\"<li class=\\\"page-item next\\\"><a href=\\\"/foo?page=11\\\"  class=\\\"page-link\\\" rel=\\\"next\\\" aria-label=\\\"next\\\">Next&nbsp;&rsaquo;</a></li>\"},  [0], {\"0\":[1,\"gap\",6,7,8,9,\"10\",11,12,13,14,\"gap\",50]}]</script>"
-    end
+"<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-responsive-bootstrap pagination\" role=\"navigation\" aria-label=\"pager\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"before\":\"<ul class=\\\"pagination\\\"><li class=\\\"page-item prev\\\"><a href=\\\"/foo?page=9\\\"  class=\\\"page-link\\\" rel=\\\"prev\\\" aria-label=\\\"previous\\\">&lsaquo;&nbsp;Prev</a></li>\",\"1\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=1\\\"  class=\\\"page-link\\\" >1</a></li>\",\"gap\":\"<li class=\\\"page-item gap disabled\\\"><a href=\\\"#\\\" class=\\\"page-link\\\">&hellip;</a></li>\",\"6\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=6\\\"  class=\\\"page-link\\\" >6</a></li>\",\"7\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=7\\\"  class=\\\"page-link\\\" >7</a></li>\",\"8\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=8\\\"  class=\\\"page-link\\\" >8</a></li>\",\"9\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=9\\\"  class=\\\"page-link\\\" rel=\\\"prev\\\" >9</a></li>\",\"10\":\"<li class=\\\"page-item active\\\"><a href=\\\"/foo?page=10\\\"  class=\\\"page-link\\\" >10</a></li>\",\"11\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=11\\\"  class=\\\"page-link\\\" rel=\\\"next\\\" >11</a></li>\",\"12\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=12\\\"  class=\\\"page-link\\\" >12</a></li>\",\"13\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=13\\\"  class=\\\"page-link\\\" >13</a></li>\",\"14\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=14\\\"  class=\\\"page-link\\\" >14</a></li>\",\"50\":\"<li class=\\\"page-item\\\"><a href=\\\"/foo?page=50\\\"  class=\\\"page-link\\\" >50</a></li>\",\"after\":\"<li class=\\\"page-item next\\\"><a href=\\\"/foo?page=11\\\"  class=\\\"page-link\\\" rel=\\\"next\\\" aria-label=\\\"next\\\">Next&nbsp;&rsaquo;</a></li></ul>\"},  [0], {\"0\":[1,\"gap\",6,7,8,9,\"10\",11,12,13,14,\"gap\",50]}]</script>"    end
 
   end
 
@@ -91,30 +84,26 @@
       pagy, _  = @array.pagy(1)
       html, id = frontend.pagy_nav_responsive_bulma(pagy), caller(0,1)[0].hash
       html.must_equal \
-        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-bulma pagination is-centered\" role=\"navigation\" aria-label=\"pagination\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<a class=\\\"pagination-previous\\\" disabled>&lsaquo;&nbsp;Prev</a><ul class=\\\"pagination-list\\\">\",\"1\":\"<li><a href=\\\"/foo?page=1\\\"   class=\\\"pagination-link is-current\\\" area-current=\\\"page\\\" area-label=\\\"page 1\\\">1</a></li>\",\"2\":\"<li><a href=\\\"/foo?page=2\\\"   rel=\\\"next\\\" class=\\\"pagination-link\\\" area-label=\\\"goto page 2\\\">2</a></li>\",\"3\":\"<li><a href=\\\"/foo?page=3\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 3\\\">3</a></li>\",\"4\":\"<li><a href=\\\"/foo?page=4\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 4\\\">4</a></li>\",\"5\":\"<li><a href=\\\"/foo?page=5\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 5\\\">5</a></li>\",\"6\":\"<li><a href=\\\"/foo?page=6\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 6\\\">6</a></li>\",\"next\":\"</ul><a href=\\\"/foo?page=2\\\"   rel=\\\"next\\\" class=\\\"pagination-next\\\" aria-label=\\\"next page\\\">Next&nbsp;&rsaquo;</a>\"},  [0], {\"0\":[\"1\",2,3,4,5,6]}]</script>"
-    end
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-bulma pagination is-centered\" role=\"navigation\" aria-label=\"pagination\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"before\":\"<a class=\\\"pagination-previous\\\" disabled>&lsaquo;&nbsp;Prev</a><a href=\\\"/foo?page=2\\\"   rel=\\\"next\\\" class=\\\"pagination-next\\\" aria-label=\\\"next page\\\">Next&nbsp;&rsaquo;</a><ul class=\\\"pagination-list\\\">\",\"1\":\"<li><a href=\\\"/foo?page=1\\\"   class=\\\"pagination-link is-current\\\" aria-current=\\\"page\\\" aria-label=\\\"page 1\\\">1</a></li>\",\"2\":\"<li><a href=\\\"/foo?page=2\\\"   rel=\\\"next\\\" class=\\\"pagination-link\\\" aria-label=\\\"goto page 2\\\">2</a></li>\",\"3\":\"<li><a href=\\\"/foo?page=3\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 3\\\">3</a></li>\",\"4\":\"<li><a href=\\\"/foo?page=4\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 4\\\">4</a></li>\",\"5\":\"<li><a href=\\\"/foo?page=5\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 5\\\">5</a></li>\",\"6\":\"<li><a href=\\\"/foo?page=6\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 6\\\">6</a></li>\",\"after\":\"</ul>\"},  [0], {\"0\":[\"1\",2,3,4,5,6]}]</script>"    end
 
     it 'renders page 3 for bulma' do
       pagy, _  = @array.pagy(3)
       html, id = frontend.pagy_nav_responsive_bulma(pagy), caller(0,1)[0].hash
       html.must_equal \
-        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-bulma pagination is-centered\" role=\"navigation\" aria-label=\"pagination\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<a href=\\\"/foo?page=2\\\"   rel=\\\"prev\\\" class=\\\"pagination-previous\\\" aria-label=\\\"previous page\\\">&lsaquo;&nbsp;Prev</a><ul class=\\\"pagination-list\\\">\",\"1\":\"<li><a href=\\\"/foo?page=1\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 1\\\">1</a></li>\",\"2\":\"<li><a href=\\\"/foo?page=2\\\"   rel=\\\"prev\\\" class=\\\"pagination-link\\\" area-label=\\\"goto page 2\\\">2</a></li>\",\"3\":\"<li><a href=\\\"/foo?page=3\\\"   class=\\\"pagination-link is-current\\\" area-current=\\\"page\\\" area-label=\\\"page 3\\\">3</a></li>\",\"4\":\"<li><a href=\\\"/foo?page=4\\\"   rel=\\\"next\\\" class=\\\"pagination-link\\\" area-label=\\\"goto page 4\\\">4</a></li>\",\"5\":\"<li><a href=\\\"/foo?page=5\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 5\\\">5</a></li>\",\"6\":\"<li><a href=\\\"/foo?page=6\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 6\\\">6</a></li>\",\"next\":\"</ul><a href=\\\"/foo?page=4\\\"   rel=\\\"next\\\" class=\\\"pagination-next\\\" aria-label=\\\"next page\\\">Next&nbsp;&rsaquo;</a>\"},  [0], {\"0\":[1,2,\"3\",4,5,6]}]</script>"
-    end
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-bulma pagination is-centered\" role=\"navigation\" aria-label=\"pagination\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"before\":\"<a href=\\\"/foo?page=2\\\"   rel=\\\"prev\\\" class=\\\"pagination-previous\\\" aria-label=\\\"previous page\\\">&lsaquo;&nbsp;Prev</a><a href=\\\"/foo?page=4\\\"   rel=\\\"next\\\" class=\\\"pagination-next\\\" aria-label=\\\"next page\\\">Next&nbsp;&rsaquo;</a><ul class=\\\"pagination-list\\\">\",\"1\":\"<li><a href=\\\"/foo?page=1\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 1\\\">1</a></li>\",\"2\":\"<li><a href=\\\"/foo?page=2\\\"   rel=\\\"prev\\\" class=\\\"pagination-link\\\" aria-label=\\\"goto page 2\\\">2</a></li>\",\"3\":\"<li><a href=\\\"/foo?page=3\\\"   class=\\\"pagination-link is-current\\\" aria-current=\\\"page\\\" aria-label=\\\"page 3\\\">3</a></li>\",\"4\":\"<li><a href=\\\"/foo?page=4\\\"   rel=\\\"next\\\" class=\\\"pagination-link\\\" aria-label=\\\"goto page 4\\\">4</a></li>\",\"5\":\"<li><a href=\\\"/foo?page=5\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 5\\\">5</a></li>\",\"6\":\"<li><a href=\\\"/foo?page=6\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 6\\\">6</a></li>\",\"after\":\"</ul>\"},  [0], {\"0\":[1,2,\"3\",4,5,6]}]</script>"    end
 
     it 'renders page 6 for bulma' do
       pagy, _  = @array.pagy(6)
       html, id = frontend.pagy_nav_responsive_bulma(pagy), caller(0,1)[0].hash
       html.must_equal \
-        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-bulma pagination is-centered\" role=\"navigation\" aria-label=\"pagination\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<a href=\\\"/foo?page=5\\\"   rel=\\\"prev\\\" class=\\\"pagination-previous\\\" aria-label=\\\"previous page\\\">&lsaquo;&nbsp;Prev</a><ul class=\\\"pagination-list\\\">\",\"1\":\"<li><a href=\\\"/foo?page=1\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 1\\\">1</a></li>\",\"2\":\"<li><a href=\\\"/foo?page=2\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 2\\\">2</a></li>\",\"3\":\"<li><a href=\\\"/foo?page=3\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 3\\\">3</a></li>\",\"4\":\"<li><a href=\\\"/foo?page=4\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 4\\\">4</a></li>\",\"5\":\"<li><a href=\\\"/foo?page=5\\\"   rel=\\\"prev\\\" class=\\\"pagination-link\\\" area-label=\\\"goto page 5\\\">5</a></li>\",\"6\":\"<li><a href=\\\"/foo?page=6\\\"   class=\\\"pagination-link is-current\\\" area-current=\\\"page\\\" area-label=\\\"page 6\\\">6</a></li>\",\"next\":\"</ul><a class=\\\"pagination-next\\\" disabled>Next&nbsp;&rsaquo;</a>\"},  [0], {\"0\":[1,2,3,4,5,\"6\"]}]</script>"
-    end
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-bulma pagination is-centered\" role=\"navigation\" aria-label=\"pagination\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"before\":\"<a href=\\\"/foo?page=5\\\"   rel=\\\"prev\\\" class=\\\"pagination-previous\\\" aria-label=\\\"previous page\\\">&lsaquo;&nbsp;Prev</a><a class=\\\"pagination-next\\\" disabled>Next&nbsp;&rsaquo;</a><ul class=\\\"pagination-list\\\">\",\"1\":\"<li><a href=\\\"/foo?page=1\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 1\\\">1</a></li>\",\"2\":\"<li><a href=\\\"/foo?page=2\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 2\\\">2</a></li>\",\"3\":\"<li><a href=\\\"/foo?page=3\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 3\\\">3</a></li>\",\"4\":\"<li><a href=\\\"/foo?page=4\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 4\\\">4</a></li>\",\"5\":\"<li><a href=\\\"/foo?page=5\\\"   rel=\\\"prev\\\" class=\\\"pagination-link\\\" aria-label=\\\"goto page 5\\\">5</a></li>\",\"6\":\"<li><a href=\\\"/foo?page=6\\\"   class=\\\"pagination-link is-current\\\" aria-current=\\\"page\\\" aria-label=\\\"page 6\\\">6</a></li>\",\"after\":\"</ul>\"},  [0], {\"0\":[1,2,3,4,5,\"6\"]}]</script>"    end
 
     it 'renders page 10 for bulma' do
       @array   = (1..1000).to_a.extend(Pagy::Array::PageMethod)
       pagy, _  = @array.pagy(10)
       html, id = frontend.pagy_nav_responsive_bulma(pagy), caller(0,1)[0].hash
       html.must_equal \
-        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-bulma pagination is-centered\" role=\"navigation\" aria-label=\"pagination\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"prev\":\"<a href=\\\"/foo?page=9\\\"   rel=\\\"prev\\\" class=\\\"pagination-previous\\\" aria-label=\\\"previous page\\\">&lsaquo;&nbsp;Prev</a><ul class=\\\"pagination-list\\\">\",\"1\":\"<li><a href=\\\"/foo?page=1\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 1\\\">1</a></li>\",\"gap\":\"<li><span class=\\\"pagination-ellipsis\\\">&hellip;</span></li>\",\"6\":\"<li><a href=\\\"/foo?page=6\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 6\\\">6</a></li>\",\"7\":\"<li><a href=\\\"/foo?page=7\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 7\\\">7</a></li>\",\"8\":\"<li><a href=\\\"/foo?page=8\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 8\\\">8</a></li>\",\"9\":\"<li><a href=\\\"/foo?page=9\\\"   rel=\\\"prev\\\" class=\\\"pagination-link\\\" area-label=\\\"goto page 9\\\">9</a></li>\",\"10\":\"<li><a href=\\\"/foo?page=10\\\"   class=\\\"pagination-link is-current\\\" area-current=\\\"page\\\" area-label=\\\"page 10\\\">10</a></li>\",\"11\":\"<li><a href=\\\"/foo?page=11\\\"   rel=\\\"next\\\" class=\\\"pagination-link\\\" area-label=\\\"goto page 11\\\">11</a></li>\",\"12\":\"<li><a href=\\\"/foo?page=12\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 12\\\">12</a></li>\",\"13\":\"<li><a href=\\\"/foo?page=13\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 13\\\">13</a></li>\",\"14\":\"<li><a href=\\\"/foo?page=14\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 14\\\">14</a></li>\",\"50\":\"<li><a href=\\\"/foo?page=50\\\"   class=\\\"pagination-link\\\" area-label=\\\"goto page 50\\\">50</a></li>\",\"next\":\"</ul><a href=\\\"/foo?page=11\\\"   rel=\\\"next\\\" class=\\\"pagination-next\\\" aria-label=\\\"next page\\\">Next&nbsp;&rsaquo;</a>\"},  [0], {\"0\":[1,\"gap\",6,7,8,9,\"10\",11,12,13,14,\"gap\",50]}]</script>"
-    end
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-bulma pagination is-centered\" role=\"navigation\" aria-label=\"pagination\"></nav><script type=\"application/json\" class=\"pagy-responsive-json\">[\"#{id}\", {\"before\":\"<a href=\\\"/foo?page=9\\\"   rel=\\\"prev\\\" class=\\\"pagination-previous\\\" aria-label=\\\"previous page\\\">&lsaquo;&nbsp;Prev</a><a href=\\\"/foo?page=11\\\"   rel=\\\"next\\\" class=\\\"pagination-next\\\" aria-label=\\\"next page\\\">Next&nbsp;&rsaquo;</a><ul class=\\\"pagination-list\\\">\",\"1\":\"<li><a href=\\\"/foo?page=1\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 1\\\">1</a></li>\",\"gap\":\"<li><span class=\\\"pagination-ellipsis\\\">&hellip;</span></li>\",\"6\":\"<li><a href=\\\"/foo?page=6\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 6\\\">6</a></li>\",\"7\":\"<li><a href=\\\"/foo?page=7\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 7\\\">7</a></li>\",\"8\":\"<li><a href=\\\"/foo?page=8\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 8\\\">8</a></li>\",\"9\":\"<li><a href=\\\"/foo?page=9\\\"   rel=\\\"prev\\\" class=\\\"pagination-link\\\" aria-label=\\\"goto page 9\\\">9</a></li>\",\"10\":\"<li><a href=\\\"/foo?page=10\\\"   class=\\\"pagination-link is-current\\\" aria-current=\\\"page\\\" aria-label=\\\"page 10\\\">10</a></li>\",\"11\":\"<li><a href=\\\"/foo?page=11\\\"   rel=\\\"next\\\" class=\\\"pagination-link\\\" aria-label=\\\"goto page 11\\\">11</a></li>\",\"12\":\"<li><a href=\\\"/foo?page=12\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 12\\\">12</a></li>\",\"13\":\"<li><a href=\\\"/foo?page=13\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 13\\\">13</a></li>\",\"14\":\"<li><a href=\\\"/foo?page=14\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 14\\\">14</a></li>\",\"50\":\"<li><a href=\\\"/foo?page=50\\\"   class=\\\"pagination-link\\\" aria-label=\\\"goto page 50\\\">50</a></li>\",\"after\":\"</ul>\"},  [0], {\"0\":[1,\"gap\",6,7,8,9,\"10\",11,12,13,14,\"gap\",50]}]</script>"    end
 
   end