Skip to content

fix: improve pagination aria labels and semantics #690

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ZQDesigned wants to merge 10 commits into
base: master
Choose a base branch
from
Open

fix: improve pagination aria labels and semantics #690

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c559371
fix: improve pagination a11y semantics without locale fallback helper
ZQDesigned Jun 1, 2026
4314e73
test: cover pagination space key interactions
ZQDesigned Jun 2, 2026
ac03488
test: cover enter keycode branch for pagination keyboard handler
ZQDesigned Jun 2, 2026
ac888b9
fix: address pagination a11y review feedback
ZQDesigned Jun 2, 2026
50a4532
test: update demo snapshots for simple input label
ZQDesigned Jun 3, 2026
52352b5
chore: document spacebar normalization in key handler
ZQDesigned Jun 3, 2026
282e193
test: cover pagination activation key helper
ZQDesigned Jun 4, 2026
d7c0cfe
fix: limit pagination prev next fallback usage
ZQDesigned Jun 4, 2026
4bf38a4
fix: remove extra pagination locale fallbacks
ZQDesigned Jun 4, 2026
95a4dc8
Merge remote-tracking branch 'upstream/master' into fix/a11y-aria-labels
ZQDesigned Jun 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion src/Pager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type { PaginationProps } from './interface';
export interface PagerProps extends Pick<PaginationProps, 'itemRender'> {
rootPrefixCls: string;
page: number;
pageLabel?: string;
active?: boolean;
className?: string;
style?: React.CSSProperties;
Expand All @@ -22,6 +23,7 @@ const Pager: React.FC<PagerProps> = (props) => {
const {
rootPrefixCls,
page,
pageLabel,
active,
className,
style,
Expand Down Expand Up @@ -50,7 +52,14 @@ const Pager: React.FC<PagerProps> = (props) => {
onKeyPress(e, onClick, page);
};

const pager = itemRender(page, 'page', <a rel="nofollow">{page}</a>);
const pager = itemRender(
page,
'page',
<a tabIndex={-1} aria-hidden="true" rel="nofollow">
{page}
</a>,
);
const pagerLabel = `${pageLabel || 'Page'} ${page}`.trim();

return pager ? (
<li
Expand All @@ -60,6 +69,9 @@ const Pager: React.FC<PagerProps> = (props) => {
onClick={handleClick}
onKeyDown={handleKeyPress}
tabIndex={0}
role="button"
aria-label={pagerLabel}
aria-current={active ? 'page' : undefined}
>
{pager}
</li>
Expand Down
61 changes: 44 additions & 17 deletions src/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,12 +116,15 @@ const Pagination: React.FC<PaginationProps> = (props) => {

function getItemIcon(
icon: React.ReactNode | React.ComponentType<PaginationProps>,
label: string,
_label: string,
title?: string,
) {
let iconNode = icon || (
<button
type="button"
aria-label={label}
tabIndex={-1}
aria-hidden="true"
title={title}
className={`${prefixCls}-item-link`}
/>
);
Comment thread
ZQDesigned marked this conversation as resolved.
Expand Down Expand Up @@ -246,41 +249,48 @@ const Pagination: React.FC<PaginationProps> = (props) => {
handleChange(jumpNextPage);
}

function runIfEnter(
function runIfEnterOrSpace(
event: React.KeyboardEvent<HTMLLIElement>,
callback: (...args: any[]) => void,
...restParams: any[]
) {
if (
event.key === 'Enter' ||
event.key === ' ' ||
event.key === 'Spacebar' ||
event.charCode === KeyCode.ENTER ||
event.keyCode === KeyCode.ENTER
) {
event.preventDefault();
callback(...restParams);
Comment thread
ZQDesigned marked this conversation as resolved.
}
Comment thread
ZQDesigned marked this conversation as resolved.
}

function runIfEnterPrev(event: React.KeyboardEvent<HTMLLIElement>) {
runIfEnter(event, prevHandle);
runIfEnterOrSpace(event, prevHandle);
}

function runIfEnterNext(event: React.KeyboardEvent<HTMLLIElement>) {
runIfEnter(event, nextHandle);
runIfEnterOrSpace(event, nextHandle);
}

function runIfEnterJumpPrev(event: React.KeyboardEvent<HTMLLIElement>) {
runIfEnter(event, jumpPrevHandle);
runIfEnterOrSpace(event, jumpPrevHandle);
}

function runIfEnterJumpNext(event: React.KeyboardEvent<HTMLLIElement>) {
runIfEnter(event, jumpNextHandle);
runIfEnterOrSpace(event, jumpNextHandle);
}

function renderPrev(prevPage: number) {
const prevButton = itemRender(
prevPage,
'prev',
getItemIcon(prevIcon, 'prev page'),
getItemIcon(
Comment thread
ZQDesigned marked this conversation as resolved.
prevIcon,
locale.prev_page,
showTitle ? locale.prev_page : undefined,
),
);
return React.isValidElement<HTMLButtonElement>(prevButton)
? React.cloneElement(prevButton, { disabled: !hasPrev })
Expand All @@ -291,7 +301,11 @@ const Pagination: React.FC<PaginationProps> = (props) => {
const nextButton = itemRender(
nextPage,
'next',
getItemIcon(nextIcon, 'next page'),
getItemIcon(
nextIcon,
locale.next_page,
showTitle ? locale.next_page : undefined,
),
);
return React.isValidElement<HTMLButtonElement>(nextButton)
? React.cloneElement(nextButton, { disabled: !hasNext })
Expand Down Expand Up @@ -335,9 +349,10 @@ const Pagination: React.FC<PaginationProps> = (props) => {
const pagerProps: PagerProps = {
rootPrefixCls: prefixCls,
onClick: handleChange,
onKeyPress: runIfEnter,
onKeyPress: runIfEnterOrSpace,
showTitle,
itemRender,
pageLabel: locale.page,
page: -1,
className: paginationClassNames?.item,
style: styles?.item,
Expand Down Expand Up @@ -394,7 +409,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
) : (
<input
type="text"
aria-label={locale.jump_to}
aria-label={locale.page}
Comment thread
ZQDesigned marked this conversation as resolved.
Outdated
value={internalInputVal}
Comment thread
ZQDesigned marked this conversation as resolved.
disabled={disabled}
onKeyDown={handleKeyDown}
Expand Down Expand Up @@ -436,40 +451,50 @@ const Pagination: React.FC<PaginationProps> = (props) => {
const jumpPrevContent = itemRender(
jumpPrevPage,
'jump-prev',
getItemIcon(jumpPrevIcon, 'prev page'),
getItemIcon(
jumpPrevIcon,
prevItemTitle,
showTitle ? prevItemTitle : undefined,
),
);
const jumpNextContent = itemRender(
jumpNextPage,
'jump-next',
getItemIcon(jumpNextIcon, 'next page'),
getItemIcon(
jumpNextIcon,
nextItemTitle,
showTitle ? nextItemTitle : undefined,
),
);

if (showPrevNextJumpers) {
jumpPrev = jumpPrevContent ? (
<li
title={showTitle ? prevItemTitle : null}
key="prev"
onClick={jumpPrevHandle}
tabIndex={0}
onKeyDown={runIfEnterJumpPrev}
className={clsx(`${prefixCls}-jump-prev`, {
[`${prefixCls}-jump-prev-custom-icon`]: !!jumpPrevIcon,
})}
role="button"
aria-label={prevItemTitle}
>
{jumpPrevContent}
</li>
) : null;

jumpNext = jumpNextContent ? (
<li
title={showTitle ? nextItemTitle : null}
key="next"
onClick={jumpNextHandle}
tabIndex={0}
onKeyDown={runIfEnterJumpNext}
className={clsx(`${prefixCls}-jump-next`, {
[`${prefixCls}-jump-next-custom-icon`]: !!jumpNextIcon,
})}
role="button"
aria-label={nextItemTitle}
>
{jumpNextContent}
</li>
Expand Down Expand Up @@ -528,7 +553,6 @@ const Pagination: React.FC<PaginationProps> = (props) => {
const prevDisabled = !hasPrev || !allPages;
prev = (
<li
title={showTitle ? locale.prev_page : null}
onClick={prevHandle}
tabIndex={prevDisabled ? null : 0}
onKeyDown={runIfEnterPrev}
Expand All @@ -537,6 +561,8 @@ const Pagination: React.FC<PaginationProps> = (props) => {
})}
style={styles?.item}
aria-disabled={prevDisabled}
role="button"
aria-label={locale.prev_page}
>
{prev}
</li>
Expand All @@ -557,7 +583,6 @@ const Pagination: React.FC<PaginationProps> = (props) => {

next = (
<li
title={showTitle ? locale.next_page : null}
onClick={nextHandle}
tabIndex={nextTabIndex}
onKeyDown={runIfEnterNext}
Expand All @@ -566,6 +591,8 @@ const Pagination: React.FC<PaginationProps> = (props) => {
})}
style={styles?.item}
aria-disabled={nextDisabled}
role="button"
aria-label={locale.next_page}
>
{next}
</li>
Expand Down
Loading