diff --git a/.changeset/friendly-boats-serve.md b/.changeset/friendly-boats-serve.md new file mode 100644 index 00000000000..58bdfd26fd9 --- /dev/null +++ b/.changeset/friendly-boats-serve.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +fix(Pagination): Use anchor instead of button for disabled prev/next controls diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx index 14e22cb264e..616272ffd5a 100644 --- a/packages/react/src/Pagination/Pagination.tsx +++ b/packages/react/src/Pagination/Pagination.tsx @@ -76,14 +76,11 @@ const Page = styled.a` &[aria-disabled], &[aria-disabled]:hover { - color: ${get('colors.primer.fg.disabled')}; // check - cursor: default; - background-color: transparent; - border-color: transparent; - font-size: inherit; - font-family: inherit; - padding-top: inherit; - padding-bottom: inherit; + margin: 0 2px; + + &:first-child { + margin-right: 6px; + } } &[aria-disabled], diff --git a/packages/react/src/Pagination/model.tsx b/packages/react/src/Pagination/model.tsx index e8e80c7a682..f4a1e449027 100644 --- a/packages/react/src/Pagination/model.tsx +++ b/packages/react/src/Pagination/model.tsx @@ -148,7 +148,7 @@ export function buildComponentData( key = 'page-prev' content = 'Previous' if (page.disabled) { - Object.assign(props, {as: 'button', 'aria-disabled': 'true'}) + Object.assign(props, {'aria-disabled': 'true', role: 'link'}) } else { Object.assign(props, { rel: 'prev', @@ -163,7 +163,7 @@ export function buildComponentData( key = 'page-next' content = 'Next' if (page.disabled) { - Object.assign(props, {as: 'button', 'aria-disabled': 'true'}) + Object.assign(props, {'aria-disabled': 'true', role: 'link'}) } else { Object.assign(props, { rel: 'next',