Skip to content
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

Jump to bottom

fix(a11y): set aria-hidden on prev/next link text #8

Merged
merged 1 commit into from
Nov 5, 2021
Merged

fix(a11y): set aria-hidden on prev/next link text #8

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
fix(a11y): set aria-hidden on prev/next link text 
Since these have a label we need to hide the text content which is used
as the label. Right now these announce both the `aria-label` and the
text content.

It could be tempting to wrap the arrows with a span with
`aria-hidden=true` on it and then add a visually hidden span with "Page"
in it, but that would probably suffer from screen readers fragmenting
the text.
  • Loading branch information
@knowler
knowler committed Nov 4, 2021
commit b112d5812b122d5ab5df18192019d41693fb032b
8 changes: 6 additions & 2 deletions src/resources/views/pagination.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
rel="prev"
aria-label="Previous Page"
class="border rounded-sm mr-3 py-1 px-4 hover:bg-blue-600 hover:text-white"
>&larr; Previous</a>
>
<span aria-hidden="true">&larr; Previous</span>
</a>
@endif

<ul class="flex">
Expand Down Expand Up @@ -43,7 +45,9 @@ class="border rounded-sm mr-3 py-1 px-4 hover:bg-blue-600 hover:text-white"
rel="next"
aria-label="Next Page"
class="border rounded-sm mr-3 py-1 px-4 hover:bg-blue-600 hover:text-white"
>Next &rarr;</a>
>
<span aria-hidden="true">Next &rarr;</span>
</a>
@endif
</nav>
@endif