From a4e93cfd00fcd37b36846bc6c14384b652b1d42b Mon Sep 17 00:00:00 2001
From: antoliny0919 <antoliny0919@gmail.com>
Date: Sun, 8 Jun 2025 10:02:56 +0900
Subject: [PATCH] Fixed pagination component accessibility.

---
 djangosnippets/static/scss/main.scss           |  4 ----
 .../templates/base/components/pagination.html  | 18 +++++++++---------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/djangosnippets/static/scss/main.scss b/djangosnippets/static/scss/main.scss
index de2b5272..daf52980 100644
--- a/djangosnippets/static/scss/main.scss
+++ b/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;
diff --git a/djangosnippets/templates/base/components/pagination.html b/djangosnippets/templates/base/components/pagination.html
index aeeadbdf..4b44fc99 100644
--- a/djangosnippets/templates/base/components/pagination.html
+++ b/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 %}