Skip to content

fix: remove role="button" from li elements #727

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

Closed
yoyo837 wants to merge 1 commit into from
Closed

fix: remove role="button" from li elements #727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 0 additions & 1 deletion src/Pager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ const Pager: React.FC<PagerProps> = (props) => {
onClick={handleClick}
onKeyDown={handleKeyPress}
tabIndex={0}

@yoyo837 yoyo837 Oct 14, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Valid concern — this is exactly the tradeoff #690 tried to solve when it added the role. However, role="button" on an <li> inside <ul> is not allowed by ARIA in HTML, so the v1.5/1.6 markup cannot ship in any axe-gated downstream: antd's CI fails 5 test jobs over aria-allowed-role + list on every component rendering Pagination (ant-design/ant-design#58604).

Moving focus/handlers onto a real <button> inside the <li> cannot be done unconditionally, because itemRender returns arbitrary nodes (links, icons, null) that cannot be nested inside a <button>. The dual-path approach — native <button> only when the default render is used, li-as-control otherwise (also suggested by CodeRabbit below) — is a sound future direction, but it changes the DOM/CSS contract for the default case (downstream styles target the li directly) and doubles the behavior matrix, so I'd keep it out of this compliance-fix patch.

This PR restores the pre-1.5.0 state (a bare focusable <li>, which shipped for years) while keeping every #690 improvement — aria-label, aria-current="page", aria-disabled, Enter/Space activation — so assistive-tech users get strictly more information than v1.4.x, without the spec violation.

Happy to follow up with the dual-path in a separate PR if that's the preferred direction.

role="button"
aria-label={pagerLabel}
aria-current={active ? 'page' : undefined}
>
Expand Down
4 changes: 0 additions & 4 deletions src/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -482,7 +482,6 @@ const Pagination: React.FC<PaginationProps> = (props) => {
[`${prefixCls}-jump-prev-custom-icon`]:
isReactRenderable(jumpPrevIcon),
})}

@yoyo837 yoyo837 Oct 14, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same reasoning as my reply on the Pager.tsx thread — the itemRender API contract prevents moving focus/handlers onto an inner control in this patch; the dual-path native-button direction is proposed there as the follow-up.

role="button"
aria-label={prevItemTitle}
>
{jumpPrevContent}
Expand All @@ -499,7 +498,6 @@ const Pagination: React.FC<PaginationProps> = (props) => {
[`${prefixCls}-jump-next-custom-icon`]:
isReactRenderable(jumpNextIcon),
})}
role="button"
aria-label={nextItemTitle}
>
{jumpNextContent}
Expand Down Expand Up @@ -581,7 +579,6 @@ const Pagination: React.FC<PaginationProps> = (props) => {
})}
style={styles?.item}
aria-disabled={prevDisabled}

@yoyo837 yoyo837 Oct 14, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same reasoning as my reply on the Pager.tsx thread — the itemRender API contract prevents moving focus/handlers onto an inner control in this patch; the dual-path native-button direction is proposed there as the follow-up.

role="button"
aria-label={locale.prev_page}
>
{prev}
Expand Down Expand Up @@ -611,7 +608,6 @@ const Pagination: React.FC<PaginationProps> = (props) => {
})}
style={styles?.item}
aria-disabled={nextDisabled}

@yoyo837 yoyo837 Oct 14, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same reasoning as my reply on the Pager.tsx thread — the itemRender API contract prevents moving focus/handlers onto an inner control in this patch; the dual-path native-button direction is proposed there as the follow-up.

role="button"
aria-label={locale.next_page}
>
{next}
Expand Down
Loading
Loading