fix(Pagination): Use anchor instead of button for disabled prev/next …

…controls (#4951) * fix(Pagination): a11y improvements * Create friendly-boats-serve.md * fix(Pagination): only add role link to disabled anchors
primer · Sep 23, 2024 · 1d18f0e · 1d18f0e
1 parent 9f27661
commit 1d18f0e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/.changeset/friendly-boats-serve.md 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
@@ -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
@@ -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',