From 2b987adefbd578cf764a97a89fdf07395f6ce893 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 11 Sep 2024 16:06:45 -0400
Subject: [PATCH 1/3] fix(Pagination): a11y improvements

---
 packages/react/src/Pagination/Pagination.tsx | 13 +++++--------
 packages/react/src/Pagination/model.tsx      |  7 +++++--
 2 files changed, 10 insertions(+), 10 deletions(-)

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..0982a5fd7b8 100644
--- a/packages/react/src/Pagination/model.tsx
+++ b/packages/react/src/Pagination/model.tsx
@@ -148,13 +148,14 @@ 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'})
       } else {
         Object.assign(props, {
           rel: 'prev',
           href: hrefBuilder(page.num),
           'aria-label': 'Previous Page',
           onClick,
+          role: 'link',
         })
       }
       break
@@ -163,13 +164,14 @@ 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'})
       } else {
         Object.assign(props, {
           rel: 'next',
           href: hrefBuilder(page.num),
           'aria-label': 'Next Page',
           onClick,
+          role: 'link',
         })
       }
       break
@@ -185,6 +187,7 @@ export function buildComponentData(
         'aria-label': `Page ${page.num}${page.precedesBreak ? '...' : ''}`,
         onClick,
         'aria-current': page.selected ? 'page' : undefined,
+        role: 'link',
       })
       break
     }

From 0832e2afad8926449412260120ae4a19a0a9cdb6 Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Wed, 11 Sep 2024 16:35:26 -0400
Subject: [PATCH 2/3] Create friendly-boats-serve.md

---
 .changeset/friendly-boats-serve.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/friendly-boats-serve.md

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

From cca5a45c8cbae4c24debbd7569ea0427b6d14e02 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 16 Sep 2024 11:16:57 -0400
Subject: [PATCH 3/3] fix(Pagination): only add role link to disabled anchors

---
 packages/react/src/Pagination/model.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/Pagination/model.tsx b/packages/react/src/Pagination/model.tsx
index 0982a5fd7b8..f4a1e449027 100644
--- a/packages/react/src/Pagination/model.tsx
+++ b/packages/react/src/Pagination/model.tsx
@@ -148,14 +148,13 @@ export function buildComponentData(
       key = 'page-prev'
       content = 'Previous'
       if (page.disabled) {
-        Object.assign(props, {'aria-disabled': 'true'})
+        Object.assign(props, {'aria-disabled': 'true', role: 'link'})
       } else {
         Object.assign(props, {
           rel: 'prev',
           href: hrefBuilder(page.num),
           'aria-label': 'Previous Page',
           onClick,
-          role: 'link',
         })
       }
       break
@@ -164,14 +163,13 @@ export function buildComponentData(
       key = 'page-next'
       content = 'Next'
       if (page.disabled) {
-        Object.assign(props, {'aria-disabled': 'true'})
+        Object.assign(props, {'aria-disabled': 'true', role: 'link'})
       } else {
         Object.assign(props, {
           rel: 'next',
           href: hrefBuilder(page.num),
           'aria-label': 'Next Page',
           onClick,
-          role: 'link',
         })
       }
       break
@@ -187,7 +185,6 @@ export function buildComponentData(
         'aria-label': `Page ${page.num}${page.precedesBreak ? '...' : ''}`,
         onClick,
         'aria-current': page.selected ? 'page' : undefined,
-        role: 'link',
       })
       break
     }