DataTable: Add outline-offset to DataTable pagination buttons (#6055)

Author: TylerJDev

.changeset/fine-impalas-eat.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+DataTable: Adds outline-offset to focus indicator on pagination buttons

packages/react/src/DataTable/Pagination.tsx

@@ -81,14 +81,19 @@ const StyledPagination = styled.nav`
   .TablePaginationPage:hover,
   .TablePaginationPage:focus {
     background-color: ${get('colors.actionListItem.default.hoverBg')};
-    transition-duration: 0.1s;
   }
 
   .TablePaginationPage[data-active='true'] {
     background-color: ${get('colors.accent.emphasis')};
     color: ${get('colors.fg.onEmphasis')};
   }
 
+  .TablePaginationPage[data-active='true']:focus-visible {
+    outline: 2px solid var(--bgColor-accent-emphasis);
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
+  }
+
   .TablePaginationTruncationStep {
     display: flex;
     align-items: center;