diff --git a/.changeset/eighty-carpets-rush.md b/.changeset/eighty-carpets-rush.md new file mode 100644 index 00000000000..829d5dae13d --- /dev/null +++ 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 index 271e6612b7f..9cc2d4e4c91 100644 --- 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 = () => ( - e.preventDefault()} showPages={{narrow: false}} /> -) +export const Default = () => { + const [page, setPage] = useState(2) + + return ( + { + e.preventDefault() + setPage(n) + }} + showPages={{narrow: false}} + /> + ) +} export const Playground: StoryFn> = ({showPages, ...args}) => { return ( diff --git a/packages/react/src/Pagination/model.tsx b/packages/react/src/Pagination/model.tsx index f4a1e449027..2883f802444 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, {'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',