From e59cd51d559f46a17f44a694203fae72b837354a Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Mon, 7 Oct 2024 14:44:58 -0700
Subject: [PATCH] lil bug fix

---
 packages/react/src/Pagination/Pagination.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index 616272ffd5a..db3671c8dd8 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -4,7 +4,6 @@ import Box from '../Box'
 import {get} from '../constants'
 import type {SxProp} from '../sx'
 import sx from '../sx'
-import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles'
 import {buildComponentData, buildPaginationModel} from './model'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {viewportRanges} from '../hooks/useResponsiveValue'
@@ -56,7 +55,10 @@ const Page = styled.a`
     transition-duration: 0.1s;
   }
 
-  ${getGlobalFocusStyles(0)};
+  &:focus-visible {
+    outline: 2px solid ${get('colors.accent.emphasis')};
+    outline-offset: -2px;
+  }
 
   &:active {
     border-color: ${get('colors.border.muted')};
@@ -74,6 +76,12 @@ const Page = styled.a`
     border-color: transparent;
   }
 
+  &[aria-current]:focus-visible {
+    outline: 2px solid ${get('colors.accent.emphasis')};
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 3px ${get('colors.fg.onEmphasis')};
+  }
+
   &[aria-disabled],
   &[aria-disabled]:hover {
     margin: 0 2px;
@@ -196,7 +204,7 @@ const PaginationContainer = styled.nav<SxProp>`
         .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:first-child {
           margin-inline-end: 0;
         }
-        
+
         .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:last-child {
           margin-inline-start: 0;
         }