From c9830cade7c9d356bcffed53c0f1b74dd7784b20 Mon Sep 17 00:00:00 2001
From: Ridwan Sanusi <ridwan.sanusi@temporal.io>
Date: Thu, 11 Jun 2026 13:45:28 -0400
Subject: [PATCH 1/2] =?UTF-8?q?a11y(2.5.8):=20pagination=20=E2=80=94=20gro?=
 =?UTF-8?q?w=20caret=20buttons=20from=2012=C3=9712=20to=2024=C3=9724=20CSS?=
 =?UTF-8?q?=20px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The .caret button rendered at 12×12 CSS px — half the WCAG 2.5.8
24×24 minimum. Changing width/height from 12px to 24px and adding
inline-flex items-center justify-center centres the existing CSS
triangle decoration within the enlarged hit area. Applied to both
api-pagination.svelte and pagination.svelte.

A11y-Audit-Ref: 2.5.8-pagination-caret-buttons

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/holocene/api-pagination.svelte | 6 +++---
 src/lib/holocene/pagination.svelte     | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/holocene/api-pagination.svelte b/src/lib/holocene/api-pagination.svelte
index b23986a4e7..7046d185e6 100644
--- a/src/lib/holocene/api-pagination.svelte
+++ b/src/lib/holocene/api-pagination.svelte
@@ -374,10 +374,10 @@
   }
 
   .caret {
-    @apply relative;
+    @apply relative inline-flex items-center justify-center;
 
-    width: 12px;
-    height: 12px;
+    width: 24px;
+    height: 24px;
   }
 
   .caret:disabled {
diff --git a/src/lib/holocene/pagination.svelte b/src/lib/holocene/pagination.svelte
index c8e8937b40..fb05235387 100644
--- a/src/lib/holocene/pagination.svelte
+++ b/src/lib/holocene/pagination.svelte
@@ -257,10 +257,10 @@
 
 <style lang="postcss">
   .caret {
-    @apply relative;
+    @apply relative inline-flex items-center justify-center;
 
-    width: 12px;
-    height: 12px;
+    width: 24px;
+    height: 24px;
   }
 
   .caret:disabled {

From 0b27b416917f42759ac966d9b722b68c01207532 Mon Sep 17 00:00:00 2001
From: Ardie Wen <ardie.wen@temporal.io>
Date: Tue, 16 Jun 2026 16:23:26 -0400
Subject: [PATCH 2/2] fix: positioning visual regression

---
 src/lib/holocene/api-pagination.svelte | 4 ++--
 src/lib/holocene/pagination.svelte     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/holocene/api-pagination.svelte b/src/lib/holocene/api-pagination.svelte
index 7046d185e6..5866faf38f 100644
--- a/src/lib/holocene/api-pagination.svelte
+++ b/src/lib/holocene/api-pagination.svelte
@@ -355,7 +355,7 @@
 
 <style lang="postcss">
   .arrow {
-    @apply absolute left-0 top-0 h-0 w-0;
+    @apply h-0 w-0;
 
     border-style: solid;
     border-width: 6px 12px 6px 0;
@@ -374,7 +374,7 @@
   }
 
   .caret {
-    @apply relative inline-flex items-center justify-center;
+    @apply inline-flex items-center justify-center;
 
     width: 24px;
     height: 24px;
diff --git a/src/lib/holocene/pagination.svelte b/src/lib/holocene/pagination.svelte
index fb05235387..790f076fee 100644
--- a/src/lib/holocene/pagination.svelte
+++ b/src/lib/holocene/pagination.svelte
@@ -257,7 +257,7 @@
 
 <style lang="postcss">
   .caret {
-    @apply relative inline-flex items-center justify-center;
+    @apply inline-flex items-center justify-center;
 
     width: 24px;
     height: 24px;
@@ -268,7 +268,7 @@
   }
 
   .arrow {
-    @apply absolute left-0 top-0 h-0 w-0;
+    @apply h-0 w-0;
 
     border-style: solid;
     border-width: 6px 12px 6px 0;