Pagination applies aria-label to a generic div for disabled controls
Nobody has claimed this yet.
- Dominant language
- Blade
- Stars
- 977
- Forks
- 112
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 21
Description
### Flux version
v2.17.1
### Livewire version
v4.4.2
### Tailwind version
v4.3.3
### Browser and Operating System
Google Chrome 151.0.7922.174 on macOS 27.0
### What is the problem?
On the first or last page, `flux:pagination` renders the unavailable Previous or Next control as a generic `div` with `aria-label` and `aria-disabled`, but without a compatible role.
axe reports the serious `aria-prohibited-attr` rule because `aria-label` cannot be used on a `div` with no valid role. The `aria-disabled` state alone also does not expose the element as the same kind of control used by the enabled pagination buttons.
Rendered output on the first page:
```html
```
axe 4.12.1 reports:
```text
aria-prohibited-attr (serious)
aria-label attribute cannot be used on a div with no valid role attribute.
```
### Code snippets to replicate the problem
After completing the standard Flux installation, render this in a Blade view:
```blade
@php
$paginator = new \Illuminate\Pagination\LengthAwarePaginator(
items: range(1, 15),
total: 17,
perPage: 15,
currentPage: 1,
);
@endphp
```
Steps:
1. Install Flux 2.17.1 and include the documented Flux assets.
2. Make sure there are no published Flux component overrides.
3. Run `npm run build` and `php artisan view:clear`.
4. Open the view and inspect the disabled Previous control.
5. Run axe with the WCAG A and AA tags.
6. Observe `aria-prohibited-attr` on the visible generic `div`.
The same markup also exists for the disabled Next control on the last page.
### Screenshots/ screen recordings of the problem
The attached screenshot shows the minimal first-page reproduction and its disabled Previous control. The exact axe failure is included in the problem description as text so it remains searchable and copyable.
### How do you expect it to work?
Unavailable pagination controls should use valid, consistent semantics without changing the visual layout or Livewire pagination behavior. For example, the disabled state could render as a native disabled button with an accessible name, matching the enabled Previous and Next controls, or use another element and role combination that permits its accessible name and disabled state.
### Please confirm (incomplete submissions will not be addressed)
- [x] I have provided easy and step-by-step instructions to reproduce the bug.
- [x] I have provided code samples as text and NOT images.
- [x] I understand my bug report will be closed if I haven't met the criteria above.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the flux:pagination component and compare the disabled Previous and Next markup with the enabled controls. Reproduce the issue using the provided Blade paginator snippet, then run axe with the WCAG A and AA tags. Done means unavailable controls use valid, consistent accessible semantics without changing the visual layout or Livewire pagination behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- laravel, php
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 74/100