Merge branch 'main' into chore/update-octicons-react-in-lockfile

primer · Jan 7, 2025 · c4bbbcb · c4bbbcb
2 parents 570d60c + e352e19
commit c4bbbcb
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/.changeset/eighty-carpets-rush.md b/.changeset/eighty-carpets-rush.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Pagination: Hides the `Pagination` Previous and Next buttons from the accessibility tree when they are disabled.
diff --git a/packages/react/src/Pagination/Pagination.stories.tsx b/packages/react/src/Pagination/Pagination.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useState} from 'react'
 import type {Meta, StoryFn} from '@storybook/react'
 import type {ComponentProps} from '../utils/types'
 import Pagination from './Pagination'
@@ -26,9 +26,21 @@ const parseShowPagesArg = (value: boolean | string) => {
   }
 }
 
-export const Default = () => (
-  <Pagination pageCount={15} currentPage={2} onPageChange={e => e.preventDefault()} showPages={{narrow: false}} />
-)
+export const Default = () => {
+  const [page, setPage] = useState(2)
+
+  return (
+    <Pagination
+      pageCount={15}
+      currentPage={page}
+      onPageChange={(e, n) => {
+        e.preventDefault()
+        setPage(n)
+      }}
+      showPages={{narrow: false}}
+    />
+  )
+}
 
 export const Playground: StoryFn<ComponentProps<typeof Pagination>> = ({showPages, ...args}) => {
   return (

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, {'aria-disabled': 'true', role: 'link'})
+        Object.assign(props, {'aria-hidden': '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, {'aria-disabled': 'true', role: 'link'})
+        Object.assign(props, {'aria-hidden': 'true'})
       } else {
         Object.assign(props, {
           rel: 'next',