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 1/2] 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` .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:first-child { margin-inline-end: 0; } - + .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:last-child { margin-inline-start: 0; } From d8ebdb28c4db1ab3d0fd85ef5110014048746046 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Mon, 7 Oct 2024 14:47:26 -0700 Subject: [PATCH 2/2] Create large-glasses-provide.md --- .changeset/large-glasses-provide.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/large-glasses-provide.md diff --git a/.changeset/large-glasses-provide.md b/.changeset/large-glasses-provide.md new file mode 100644 index 00000000000..7452e63c888 --- /dev/null +++ b/.changeset/large-glasses-provide.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Add focus styles to Pagination component