Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Pagination: page button aria-labels are not translated on small screens

Open Beginner friendly
  • Is something wrong?
#11,427 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@Singmin is already working on this.

Since Oct 28, 2026.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
accessibility, frontend, internationalization

Research direction

Open packages/ra-ui-materialui/src/list/pagination/Pagination.tsx and compare the desktop branch, which already passes getItemAriaLabel={labelItem}, with the isSmall branch that renders the compact TablePagination. Add the same prop to the small branch, then run the pagination tests in that folder (e.g. Pagination.spec.tsx) and check that existing assertions on the small-screen rendering still pass. Done when the arrow buttons carry the translated ra.navigation.* labels at narrow widths, matching desktop.

Written by the indexing model from the issue text.

Description

What you were expecting:
On every screen size, the pagination buttons ("first", "previous", "next", "last") use the translated ra.navigation.* labels, as they do on desktop.

What happened instead:
Below the md breakpoint, <Pagination> renders the compact TablePagination without getItemAriaLabel, so MUI's English defaults are used ("Go to next page", "Go to previous page") whatever the locale. Screen reader users get English labels in a French or Spanish app.

Steps to reproduce:

  1. Open the demo https://marmelab.com/react-admin-demo/ and sign in (demo / demo).
  2. Switch the language to French with the app bar menu.
  3. Open the Reviews list on a wide screen and inspect the "next page" arrow button: aria-label="Aller à la prochaine page".
  4. Switch to a phone width (e.g. 360 px, device toolbar) and reload, then inspect the "next page" arrow next to "1-25 sur 320": aria-label="Go to next page". The visible "1-25 sur 320" text is translated; only the arrow buttons' aria-labels (read by screen readers) are not.

Related code:
packages/ra-ui-materialui/src/list/pagination/Pagination.tsx: the desktop branch passes getItemAriaLabel={labelItem}, the isSmall branch does not. Adding the same prop to the small TablePagination fixes it:

<TablePagination
    ...
    labelDisplayedRows={labelDisplayedRows}
    getItemAriaLabel={labelItem}
    slotProps={slotProps}
    {...sanitizeListRestProps(rest)}
/>

Other information:
Workaround: add MUI's locale (frFR, esES… from @mui/material/locale) to the theme.

Environment

  • React-admin version: 5.15.5 (still the same on master)
  • React version: 18.3.1
  • Browser: Chrome and Safari (WebKit)
Dominant language
TypeScript
Stars
27k
Forks
5.5k
Avg merge
1d 3m
Merged PRs (30d)
32

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from marmelab/react-admin

All issues in marmelab/react-admin

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.