Fixed pagination component accessibility. (#542)

Author: Antoliny0919

djangosnippets/static/scss/main.scss

@@ -367,7 +367,6 @@ nav.pagination {
         margin-left: 1rem;
         margin-right: 1rem;
     }
-
     li {
         display: inline-block;
         a, em, span {
@@ -397,7 +396,6 @@ nav.pagination {
             border-color: transparent;
         }
     }
-
     .previous-page::before, .next-page::after {
         display: inline-block;
         width: 1rem;
@@ -406,12 +404,10 @@ nav.pagination {
         content: "";
         background-color: currentColor;
     }
-
     .previous-page::before {
         clip-path: polygon(9.8px 12.8px, 8.7px 12.8px, 4.5px 8.5px, 4.5px 7.5px, 8.7px 3.2px, 9.8px 4.3px, 6.1px 8px, 9.8px 11.7px, 9.8px 12.8px);
         margin-right: 4px;
     }
-
     .next-page::after {
         clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px);
         margin-left: 4px;

djangosnippets/templates/base/components/pagination.html

@@ -1,21 +1,21 @@
 {% load components %}
 
 {% if pagination.multi_page %}
-<nav class="pagination" aria-labelledby="pagination">
-    {% if pagination.page.has_previous %}
+<nav class="pagination" aria-label="pagination">
+    <ul>
+    <li>{% if pagination.page.has_previous %}
     <a class="previous-page" href="{{ previous_page_link }}" rel="prev" aria-label="Previous page">Previous</a>
     {% else %}
-    <span class="previous-page disabled" rel="prev" aria-label="Previous page">Previous</span>
-    {% endif %}
-    <ul>
+    <span class="previous-page disabled">Previous</span>
+    {% endif %}</li>
     {% for i in pagination.page_range %}
         <li>{% pagination_number pagination i %}</li>
     {% endfor %}
-    </ul>
-    {% if pagination.page.has_next %}
+    <li>{% if pagination.page.has_next %}
     <a class="next-page" href="{{ next_page_link }}" rel="next" aria-label="Next page">Next</a>
     {% else %}
-    <span class="next-page disabled" rel="next" aria-label="Next page">Next</span>
-    {% endif %}
+    <span class="next-page disabled">Next</span>
+    {% endif %}</li>
+    </ul>
 </nav>
 {% endif %}