From 31a2971ee49dd4035677784fee39c11c46552217 Mon Sep 17 00:00:00 2001
From: waterlemonnn <renjiearl06@gmail.com>
Date: Fri, 7 Aug 2026 15:58:38 +0700
Subject: [PATCH] fix(pagination): announce state to screen readers

The pagination row had no landmark, page links all read the same,
and Prev/Next disabled states were opacity-only visual cues.
---
 components/ui/Pagination.tsx | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/components/ui/Pagination.tsx b/components/ui/Pagination.tsx
index 01d5ab3..c16524e 100644
--- a/components/ui/Pagination.tsx
+++ b/components/ui/Pagination.tsx
@@ -31,7 +31,10 @@ export function Pagination({
   }
 
   return (
-    <div className="mt-6 flex items-center justify-center gap-1 font-mono text-[11px]">
+    <nav
+      aria-label="Pagination"
+      className="mt-6 flex items-center justify-center gap-1 font-mono text-[11px]"
+    >
       {currentPage > 1 ? (
         <Link
           href={hrefForPage(currentPage - 1)}
@@ -40,20 +43,29 @@ export function Pagination({
           <ArrowLeftIcon size={10} /> Prev
         </Link>
       ) : (
-        <span className="inline-flex items-center gap-1.5 rounded-sm border border-border-default px-2.5 py-1.5 text-text-tertiary opacity-40">
+        <span
+          aria-disabled="true"
+          className="inline-flex items-center gap-1.5 rounded-sm border border-border-default px-2.5 py-1.5 text-text-tertiary opacity-40"
+        >
           <ArrowLeftIcon size={10} /> Prev
         </span>
       )}
 
       {pages.map((p, i) =>
         p === "…" ? (
-          <span key={`ellipsis-${i}`} className="px-1 text-text-tertiary">
+          <span
+            key={`ellipsis-${i}`}
+            aria-hidden="true"
+            className="px-1 text-text-tertiary"
+          >
             …
           </span>
         ) : (
           <Link
             key={p}
             href={hrefForPage(p)}
+            aria-current={p === currentPage ? "page" : undefined}
+            aria-label={`Page ${p}`}
             className={[
               "rounded-sm border px-2.5 py-1.5 transition-colors",
               p === currentPage
@@ -74,10 +86,13 @@ export function Pagination({
           Next <ArrowRightIcon size={10} />
         </Link>
       ) : (
-        <span className="inline-flex items-center gap-1.5 rounded-sm border border-border-default px-2.5 py-1.5 text-text-tertiary opacity-40">
+        <span
+          aria-disabled="true"
+          className="inline-flex items-center gap-1.5 rounded-sm border border-border-default px-2.5 py-1.5 text-text-tertiary opacity-40"
+        >
           Next <ArrowRightIcon size={10} />
         </span>
       )}
-    </div>
+    </nav>
   );
 }