fix: IconPrevious typo and Improve accessibility and clean up style

asyncapi · Jan 26, 2025 · 66b9af3 · 66b9af3
1 parent 458ca3e
commit 66b9af3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/components/icons/Previous.tsx b/components/icons/Previous.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 /**
  * @description Icons for Previous button in pagination
  */
-export default function IconPrevios() {
+export default function IconPrevious() {
   return (
     <svg
       width='20'

diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx
@@ -4,7 +4,7 @@ import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import Button from '../buttons/Button';
 import IconNext from '../icons/Next';
-import IconPrevios from '../icons/Previous';
+import IconPrevious from '../icons/Previous';
 import PaginationItem from './PaginationItem';
 
 export interface PaginationProps {
@@ -61,32 +61,37 @@ export default function Pagination({ totalPages, currentPage, onPageChange }: Pa
   };
 
   return (
-    <div className='font-inter flex items-center justify-center gap-8'>
+    <nav role='navigation' aria-label='Pagination' className='font-inter flex items-center justify-center gap-8'>
       {/* Previous button */}
       <Button
         onClick={() => handlePageChange(currentPage - 1)}
+        disabled={currentPage === 1}
         className={`font-normal flex h-[34px] items-center justify-center rounded bg-white px-3 py-[7px] text-sm leading-[17px] tracking-[-0.01em] ${
-          currentPage === 1 ? 'cursor-not-allowed text-gray-300' : 'text-[#141717] hover:bg-gray-50'
+          currentPage === 1 ? 'hover:bg-gray-white cursor-not-allowed text-gray-300' : 'text-[#141717] hover:bg-gray-50'
         }`}
         text='Previous'
-        icon={<IconPrevios />}
+        icon={<IconPrevious />}
         iconPosition={ButtonIconPosition.LEFT}
+        aria-label='Go to previous page'
       />
 
       {/* Page numbers */}
-      <div className='flex gap-2'>
+      <div className='flex gap-2' role='list'>
         {getPageNumbers().map((page) =>
           typeof page === 'number' ? (
             <PaginationItem
               key={page}
               pageNumber={page}
               isActive={page === currentPage}
               onPageChange={handlePageChange}
+              aria-label={`Go to page ${page}`}
+              aria-current={page === currentPage ? 'page' : undefined}
             />
           ) : (
             <span
               key={page}
               className='font-inter flex size-10 items-center justify-center text-sm font-semibold text-[#6B6B6B]'
+              aria-hidden='true'
             >
               ...
             </span>
@@ -97,12 +102,16 @@ export default function Pagination({ totalPages, currentPage, onPageChange }: Pa
       {/* Next button */}
       <Button
         onClick={() => handlePageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
         className={`font-normal flex h-[34px] items-center justify-center rounded bg-white px-3 py-[7px] text-sm leading-[17px] tracking-[-0.01em] ${
-          currentPage === totalPages ? 'cursor-not-allowed text-gray-300' : 'text-[#141717] hover:bg-gray-50'
+          currentPage === totalPages
+            ? 'cursor-not-allowedtext-gray-300 hover:bg-gray-white text-gray-300'
+            : 'text-[#141717] hover:bg-gray-50'
         }`}
         text='Next'
         icon={<IconNext />}
+        aria-label='Go to next page'
       />
-    </div>
+    </nav>
   );
 }