crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-20 00:16:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: pagination aria-labels

Browse Source
This commit is contained in:
Björn Meyer 2023-10-27 08:56:55 +02:00
parent c379914865
commit 4471d0f8c3
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/collection/pagination.tsx
View File

@ -50,10 +50,11 @@ export default function Pagination({
<li <li
key={currentPage + '-prev'} key={currentPage + '-prev'}
onClick={() => handlePageClick(currentPage - 1)} onClick={() => handlePageClick(currentPage - 1)}
className="m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2 [&.disabled]:hidden" className="m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2"
> >
<a <a
className="ml-0 flex h-10 items-center justify-center px-4 leading-tight" className="ml-0 flex h-10 items-center justify-center px-4 leading-tight"
aria-label="Previous page"
data-selected={currentPage} data-selected={currentPage}
> >
<ArrowLeftIcon className="h-5" /> <ArrowLeftIcon className="h-5" />
@ -64,12 +65,16 @@ export default function Pagination({
<li <li
key={i} key={i}
onClick={() => handlePageClick(i)} onClick={() => handlePageClick(i)}
className="m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2 [&.active]:bg-gray-100" className={`m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2 [&.active]:bg-gray-100${
i === currentPage ? ' active ' : ''
}`}
> >
<a <a
className={`ml-0 flex h-10 items-center justify-center px-4 leading-tight${ className={`ml-0 flex h-10 items-center justify-center px-4 leading-tight${
i === currentPage ? ' active font-bold' : '' i === currentPage ? ' font-bold' : ''
}`} }`}
aria-label={`Goto Page ${i + 1}`}
aria-current={i === currentPage}
data-selected={i} data-selected={i}
> >
{i + 1} {i + 1}
@ -80,10 +85,11 @@ export default function Pagination({
<li <li
key={currentPage + '-next'} key={currentPage + '-next'}
onClick={() => handlePageClick(currentPage + 1)} onClick={() => handlePageClick(currentPage + 1)}
className="m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2 [&.disabled]:hidden" className="m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2"
> >
<a <a
className="ml-0 flex h-10 items-center justify-center px-4 leading-tight" className="ml-0 flex h-10 items-center justify-center px-4 leading-tight"
aria-label="Next page"
data-selected={currentPage + 1} data-selected={currentPage + 1}
> >
<ArrowRightIcon className="h-5" /> <ArrowRightIcon className="h-5" />