a11y: #4886 clean news pagniation to include ellipsis

Author: StephDriver

src/themes/clean/templates/core/news/index.html

@@ -1,6 +1,7 @@
 {% extends "core/base.html" %}
 {% load truncate %}
 {% load dates %}
+{% load pages %}
 
 {% block title %}{{ journal_settings.news.news_title }}{% endblock title %}
 
@@ -35,21 +36,25 @@ <h2> {% trans 'This journal currently has no {{ journal_settings.news.news_title
                     </li>
                 {% endif %}
 
-                {% for page in news_items.paginator.page_range %}
-                    {% if news_items.number == page %}
+                {% for page in news_items|slice_pages_with_first_last_ellipsis:2 %}
+                    {% if page == '...' %}
                         <li class="list-inline-item">
-                            <a href="?page={{ page }}"
+                            <span class="btn btn-outline-secondary" disabled>...</span>
+                        </li>
+                    {% elif news_items.number == page.number %}
+                        <li class="list-inline-item">
+                            <a href="?page={{ page.number }}"
                                 class="btn btn-primary"
                                 >
-                                <span class="sr-only">{% trans 'current page' %}</span>{{ page }}
+                                <span class="sr-only">{% trans 'current page' %}</span>{{ page.number }}
                             </a>
                         </li>
                     {% else %}
                         <li class="list-inline-item">
-                            <a href="?page={{ page }}"
+                            <a href="?page={{ page.number }}"
                                 class="btn btn-outline-primary"
                                 >
-                                <span class="sr-only">{% trans 'page' %}</span>{{ page }}
+                                <span class="sr-only">{% trans 'page' %}</span>{{ page.number }}
                             </a>
                         </li>
                     {% endif %}

src/themes/clean/templates/press/core/news/index.html

@@ -1,6 +1,7 @@
 {% extends "core/base.html" %}
 {% load truncate %}
 {% load dates %}
+{% load pages %}
 
 {% block title %}News{% endblock title %}
 
@@ -34,20 +35,26 @@ <h2>{% trans 'This journal currently has no news items to display' %}.</h2>
                         </a>
                     </li>
                 {% endif %}
-                {{ news_items.page.page_range }}
-                {% for page in news_items.paginator.page_range %}
-                    <li class="list-inline-item">
-                        {% if news_items.number == page %}
-                            <a href="?page={{ page }}"
+                {% for page in news_items|slice_pages_with_first_last_ellipsis:2 %}
+                    {% if page == '...' %}
+                        <li class="list-inline-item">
+                            <span class="btn btn-outline-secondary" disabled>...</span>
+                        </li>
+                    {% elif news_items.number == page.number %}
+                        <li class="list-inline-item">
+                            <a href="?page={{ page.number }}"
                                 class="btn btn-primary">
-                                <span class="sr-only">{% trans 'current page' %}</span>{{ page }}
+                                <span class="sr-only">{% trans 'current page' %}</span>{{ page.number }}
                             </a>
-                        {% else %}
-                            <a href="?page={{ page }}"
-                            class="btn btn-outline-primary">{{ page }}
+                        </li>
+                    {% else %}
+                        <li class="list-inline-item">
+                            <a href="?page={{ page.number }}"
+                                class="btn btn-outline-primary">
+                                <span class="sr-only">{% trans 'page' %}</span>{{ page.number }}
                             </a>
-                        {% endif %}
-                    </li>
+                        </li>
+                    {% endif %}
                 {% endfor %}
                 {% if news_items.has_next %}
                     <li class="list-inline-item">