Add focus styles to Pagination component (#5082)

* lil bug fix

* Create large-glasses-provide.md

---------

Co-authored-by: Jon Rohan <[email protected]>

Author: langermank

.changeset/large-glasses-provide.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add focus styles to Pagination component

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;
         }