Skip to content

Admin pagination: previous/next arrow buttons have no accessible name #17377

Description

@citydean

Describe the Bug

The previous/next pagination arrows in the admin list view are icon-only buttons with no accessible name. Screen-reader users hear "button" with no indication of direction or purpose. axe-core reports this as a critical button-name violation.

Rendered markup, stock admin list view:

<button class="clickable-arrow clickable-arrow--is-disabled clickable-arrow--left" disabled type="button"></button>
<button class="clickable-arrow clickable-arrow--right" type="button"><svg class="icon icon--chevron" ></svg></button>

Root cause (verified on main)

ClickableArrow's only child is <ChevronIcon />, with no aria-label and no visually-hidden text:

return (
<button
className={classes}
disabled={isDisabled}
onClick={!isDisabled ? updatePage : undefined}
type="button"
>
<ChevronIcon />
</button>
)
}

return (
  <button
    className={classes}
    disabled={isDisabled}
    onClick={!isDisabled ? updatePage : undefined}
    type="button"
  >
    <ChevronIcon />
  </button>
)

An icon-only button with no text content and no ARIA label has no accessible name.

Link to the code that reproduces this issue

The permalink above — this is stock admin markup, not configuration-dependent, so a scaffolded repo would only re-render Payload's own ClickableArrow. The file is unchanged on main at 6981aca. Happy to push a create-payload-app -t blank repo if you'd still like one; it would be the default template with no changes.

Reproduction Steps

  1. pnpx create-payload-app@latest -t blank
  2. Seed a collection with more than one page of documents.
  3. Open its list view and inspect the pagination arrows — or run axe-core.
  4. Observe neither button has an accessible name.

Which area(s) are affected?

area: ui

Environment Info

payload:         3.84.1
@payloadcms/ui:  3.84.1
Next.js:         16.2.6
Node:            25
Browser:         Chrome 141 (headless)
axe-core:        4.12.1

Root cause verified present in main at 6981aca.

Possible fix

An aria-label derived from direction ("Previous page" / "Next page") would resolve it. ChevronIcon could take aria-hidden at the same time, since the label would then carry the meaning.

Happy to open a PR if the direction is welcome.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: uiRelated to the admin panel.

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions