Skip to content

Fix disabled pagination controls accessibility #2867

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ganyicz merged 1 commit into from
Oct 27, 2026
Merged

Fix disabled pagination controls accessibility #2867

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions stubs/resources/views/flux/pagination.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,20 +29,20 @@
@if ($paginator->hasPages())
<div class="flex items-center bg-white border border-zinc-200 rounded-[8px] p-[1px] dark:bg-white/10 dark:border-white/10">
@if ($paginator->onFirstPage())
<div class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
<button type="button" disabled aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
<flux:icon.chevron-left variant="micro" class="rtl:hidden" />
<flux:icon.chevron-right variant="micro" class="hidden rtl:inline" />
</div>
</button>
@else
@if(method_exists($paginator,'getCursorName'))
{{-- On an empty page the previous cursor is null, so fall back to the current cursor (reloads the same page, mirroring Laravel's null page URL) --}}
@php($previousCursor = $paginator->previousCursor() ?? $paginator->cursor())
<button type="button" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $previousCursor?->encode() }}" wire:click="setPage('{{ $previousCursor?->encode() }}','{{ $paginator->getCursorName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-white hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
<button type="button" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $previousCursor?->encode() }}" wire:click="setPage('{{ $previousCursor?->encode() }}','{{ $paginator->getCursorName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-white hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
<flux:icon.chevron-left variant="micro" class="rtl:hidden" />
<flux:icon.chevron-right variant="micro" class="hidden rtl:inline" />
</button>
@else
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-white hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-white hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
<flux:icon.chevron-left variant="micro" class="rtl:hidden" />
<flux:icon.chevron-right variant="micro" class="hidden rtl:inline" />
</button>
Expand All @@ -53,21 +53,21 @@
@if(method_exists($paginator,'getCursorName'))
{{-- On an empty page the next cursor is null, so fall back to the current cursor (reloads the same page, mirroring Laravel's null page URL) --}}
@php($nextCursor = $paginator->nextCursor() ?? $paginator->cursor())
<button type="button" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $nextCursor?->encode() }}" wire:click="setPage('{{ $nextCursor?->encode() }}','{{ $paginator->getCursorName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-white hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
<button type="button" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $nextCursor?->encode() }}" wire:click="setPage('{{ $nextCursor?->encode() }}','{{ $paginator->getCursorName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" aria-label="{{ __('pagination.next') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-white hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
<flux:icon.chevron-right variant="micro" class="rtl:hidden" />
<flux:icon.chevron-left variant="micro" class="hidden rtl:inline" />
</button>
@else
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-white hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" aria-label="{{ __('pagination.next') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-white hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
<flux:icon.chevron-right variant="micro" class="rtl:hidden" />
<flux:icon.chevron-left variant="micro" class="hidden rtl:inline" />
</button>
@endif
@else
<div class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
<button type="button" disabled aria-label="{{ __('pagination.next') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
<flux:icon.chevron-right variant="micro" class="rtl:hidden" />
<flux:icon.chevron-left variant="micro" class="hidden rtl:inline" />
</div>
</button>
@endif
</div>
@endif
Expand All @@ -86,10 +86,10 @@
{{-- Mobile pagination --}}
<div class="flex @[40rem]:hidden items-center bg-white border border-zinc-200 rounded-[8px] p-[1px] dark:bg-white/10 dark:border-white/10">
@if ($paginator->onFirstPage())
<div aria-disabled="true" aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
<button type="button" disabled aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
<flux:icon.chevron-left variant="micro" class="rtl:hidden" />
<flux:icon.chevron-right variant="micro" class="hidden rtl:inline" />
</div>
</button>
@else
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
<flux:icon.chevron-left variant="micro" class="rtl:hidden" />
Expand All @@ -103,20 +103,20 @@
<flux:icon.chevron-left variant="micro" class="hidden rtl:inline" />
</button>
@else
<div aria-label="{{ __('pagination.next') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
<button type="button" disabled aria-label="{{ __('pagination.next') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
<flux:icon.chevron-right variant="micro" class="rtl:hidden" />
<flux:icon.chevron-left variant="micro" class="hidden rtl:inline" />
</div>
</button>
@endif
</div>

{{-- Desktop pagination --}}
<div class="hidden @[40rem]:flex items-center bg-white border border-zinc-200 rounded-[8px] p-[1px] dark:bg-white/10 dark:border-white/10">
@if ($paginator->onFirstPage())
<div aria-disabled="true" aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
<button type="button" disabled aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
<flux:icon.chevron-left variant="micro" class="rtl:hidden" />
<flux:icon.chevron-right variant="micro" class="hidden rtl:inline" />
</div>
</button>
@else
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-6 rounded-[6px] text-zinc-400 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
<flux:icon.chevron-left variant="micro" class="rtl:hidden" />
Expand Down Expand Up @@ -161,10 +161,10 @@ class="text-xs h-6 px-2 rounded-[6px] text-zinc-400 font-medium dark:text-zinc-4
<flux:icon.chevron-left variant="micro" class="hidden rtl:inline" />
</button>
@else
<div aria-label="{{ __('pagination.next') }}" class="flex justify-center items-center size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
<button type="button" disabled aria-label="{{ __('pagination.next') }}" class="flex justify-center items-center size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
<flux:icon.chevron-right variant="micro" class="rtl:hidden" />
<flux:icon.chevron-left variant="micro" class="hidden rtl:inline" />
</div>
</button>
@endif
</div>
@endif
Expand Down
Loading