fix: button now have the correct aria-lable

feat: disable buttons if visually disabled feat: make button tab focusable if enabled
satellytes · Jan 9, 2024 · 4354d15 · 4354d15
1 parent 7d27a00
commit 4354d15
Showing 1 changed file with 6 additions and 3 deletions.
diff --git 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>