Use button instead of span for disabled prev/next controls (#3277)

* Use button instead of span for disabled prev/next controls

* Create kind-scissors-type.md

---------

Co-authored-by: Cole Bemis <colebemis@github.com>

.changeset/kind-scissors-type.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+`Pagination`: Use `<button>` instead of `<span>` for disabled prev/next controls to improve accessibility

src/Pagination/Pagination.tsx

@@ -57,6 +57,18 @@ const Page = styled.a`
     border-color: transparent;
   }
 
+  &[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;
+  }
+
   &[aria-disabled],
   &[aria-disabled]:hover,
   &[role='presentation'],

src/Pagination/model.tsx

@@ -148,7 +148,7 @@ export function buildComponentData(
       key = 'page-prev'
       content = 'Previous'
       if (page.disabled) {
-        Object.assign(props, {as: 'span', 'aria-disabled': 'true'})
+        Object.assign(props, {as: 'button', 'aria-disabled': 'true'})
       } 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: 'span', 'aria-disabled': 'true'})
+        Object.assign(props, {as: 'button', 'aria-disabled': 'true'})
       } else {
         Object.assign(props, {
           rel: 'next',