Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

add accessability to pagination
All checks were successful
deploy / deploy (push) Successful in 53s
Details

Browse Source
This commit is contained in:
Lee 2023-10-24 13:38:15 +01:00
parent ec23a73e0e
commit 647b9621c5
1 changed files with 5 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Pagination.tsx
View File

@ -31,6 +31,7 @@ export default function Pagination(props: PaginationProps) {
<button <button
className="px-3 py-1" className="px-3 py-1"
onClick={() => onPageChange(currentPage - 1)} onClick={() => onPageChange(currentPage - 1)}
aria-label="Previous Page"
> >
<ArrowUturnLeftIcon width={20} height={20} /> <ArrowUturnLeftIcon width={20} height={20} />
</button> </button>
@ -43,6 +44,7 @@ export default function Pagination(props: PaginationProps) {
<button <button
className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80" className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
onClick={() => onPageChange(1)} onClick={() => onPageChange(1)}
aria-label="First Page"
> >
1 1
</button> </button>
@ -60,6 +62,7 @@ export default function Pagination(props: PaginationProps) {
: "bg-neutral-700 hover:opacity-80" : "bg-neutral-700 hover:opacity-80"
}`} }`}
onClick={() => onPageChange(pageNumber)} onClick={() => onPageChange(pageNumber)}
aria-label={`Page ${pageNumber}`}
> >
{pageNumber} {pageNumber}
</button> </button>
@ -74,6 +77,7 @@ export default function Pagination(props: PaginationProps) {
<button <button
className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80" className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
onClick={() => onPageChange(totalPages)} onClick={() => onPageChange(totalPages)}
aria-label="Last Page"
> >
{totalPages} {totalPages}
</button> </button>
@ -86,6 +90,7 @@ export default function Pagination(props: PaginationProps) {
<button <button
className="px-3 py-1" className="px-3 py-1"
onClick={() => onPageChange(currentPage + 1)} onClick={() => onPageChange(currentPage + 1)}
aria-label="Next Page"
> >
<ArrowUturnRightIcon width={20} height={20} /> <ArrowUturnRightIcon width={20} height={20} />
</button> </button>