From 4354d151098e5edfd07ef91837ba7e2850ecf825 Mon Sep 17 00:00:00 2001
From: "noa.santo" <noa.santo@satellytes.com>
Date: Tue, 9 Jan 2024 16:51:24 +0100
Subject: [PATCH] fix: button now have the correct aria-lable feat: disable
 buttons if visually disabled feat: make button tab focusable if enabled

---
 src/components/ui/pagination/pagination.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/pagination/pagination.tsx b/src/components/ui/pagination/pagination.tsx
index 0a32682e0..34b03e907 100644
--- a/src/components/ui/pagination/pagination.tsx
+++ b/src/components/ui/pagination/pagination.tsx
@@ -42,7 +42,8 @@ const StyledLink = styled.a<{ $disabled: boolean }>`
     $disabled &&
     css`
       opacity: 50%;
-      cursor: default;
+      cursor: not-allowed;
+      pointer-events: none;
     `}
 
   &:hover {
@@ -83,7 +84,8 @@ export const Pagination = ({
       <StyledLink
         onClick={onPreviousClick}
         $disabled={currentPage === 1}
-        aria-label="Next Page"
+        aria-label="Previous Page"
+        tabIndex={currentPage === 1 ? -1 : 0}
       >
         <Icon show={'arrow_left'} />
       </StyledLink>
@@ -101,7 +103,8 @@ export const Pagination = ({
       <StyledLink
         onClick={onNextClick}
         $disabled={currentPage === amountOfPages}
-        aria-label="Previous Page"
+        aria-label="Next Page"
+        tabIndex={currentPage === amountOfPages ? -1 : 0}
       >
         <Icon show={'arrow_right'} />
       </StyledLink>