From 27eb2d2eff51da018577f29b8e17babeeb69bba5 Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Sat, 31 Oct 2026 20:05:02 -0400
Subject: [PATCH] fix(a11y): the page buttons' Previous and Next have names,
 and the current page is marked (#33475)

---
 src/lib/components/common/Pagination.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/common/Pagination.svelte b/src/lib/components/common/Pagination.svelte
index 58c1a47047..afa354ed7b 100644
--- a/src/lib/components/common/Pagination.svelte
+++ b/src/lib/components/common/Pagination.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Pagination } from 'bits-ui';
-	import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher, getContext } from 'svelte';
 
 	import ChevronLeft from '../icons/ChevronLeft.svelte';
 	import ChevronRight from '../icons/ChevronRight.svelte';
@@ -8,13 +8,16 @@
 	export let page = 0;
 	export let count = 0;
 	export let perPage = 20;
+
+	const i18n = getContext('i18n');
 </script>
 
 <div class="flex justify-center">
 	<Pagination.Root bind:page {count} {perPage}>
-		{#snippet children({ pages })}
+		{#snippet children({ pages, currentPage })}
 			<div class="my-2 flex items-center">
 				<Pagination.PrevButton
+					aria-label={$i18n.t('Previous page')}
 					class="mr-[1.5625rem] inline-flex size-8 items-center justify-center rounded-[0.5625rem] bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 active:scale-98 disabled:cursor-not-allowed disabled:text-gray-400 dark:disabled:text-gray-700 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent"
 				>
 					<ChevronLeft className="size-4" strokeWidth="2" />
@@ -26,6 +29,7 @@
 						{:else}
 							<Pagination.Page
 								{page}
+								aria-current={page.value === currentPage ? 'page' : undefined}
 								class="inline-flex size-8 items-center justify-center rounded-[0.5625rem] bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 text-sm font-normal hover:bg-dark-10 active:scale-98 disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent data-selected:bg-gray-50 data-selected:text-gray-700 data-selected:hover:bg-gray-100 dark:data-selected:bg-gray-850 dark:data-selected:text-gray-50 dark:data-selected:hover:bg-gray-800 transition"
 							>
 								{page.value}
@@ -34,6 +38,7 @@
 					{/each}
 				</div>
 				<Pagination.NextButton
+					aria-label={$i18n.t('Next page')}
 					class="ml-[1.5625rem]  inline-flex size-8 items-center justify-center rounded-[0.5625rem] bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 active:scale-98 disabled:cursor-not-allowed disabled:text-gray-400 dark:disabled:text-gray-700 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent"
 				>
 					<ChevronRight className="size-4" strokeWidth="2" />