scriptoriumadmin/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-11-15 09:31:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix(a11y): the page buttons' Previous and Next have names, and the current page is marked (#33475)

Browse source
This commit is contained in:
G30 2026-10-31 20:05:02 -04:00 • committed by GitHub
parent 6a789c1199
commit 27eb2d2eff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/lib/components/common/Pagination.svelte
View file

@ -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" />