payloadcms / payloadcms/payload
Card button aria-label and title not correctly localized
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 44.8k
- Forks
- 4.2k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 53
Description
Describe the Bug
I am seeing [object Object] values for localized collection names in card buttons:
<a type="button" aria-label="[object Object] neu erstellen" class="btn btn--icon btn--icon-style-with-border btn--icon-only btn--size-medium btn--icon-position-right btn--withoutPopup btn--style-icon-label btn--round btn--withoutPopup" title="[object Object] neu erstellen" href="/admin/collections/pages/create"><span class="btn__content"><span class="btn__icon"><svg class="icon icon--plus" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path class="stroke" d="M5.33333 9.99998H14.6667M9.99999 5.33331V14.6666" stroke-linecap="square"></path></svg></span></span></a>
Payload uses:
"aria-label": t('general:createNewLabel', {
label
})
For localized collection labels, label is an object like { en: 'Pages', de: 'Seiten' }. German translation is {{label}} neu erstellen, so interpolating the object becomes [object Object] neu erstellen. Payload’s Button also copies aria-label into title, so both attributes show it.
Correct fix would be:
title = getTranslation(label, i18n)
...
"aria-label": t('general:createNewLabel', {
label: title
})
Link to the code that reproduces this issue
https://github.com/cbratschi/payload
Reproduction Steps
Check the aria-label text in the admin panel for localized collection labels.
Which area(s) are affected?
area: core
Environment Info
Binaries:
Node: 26.3.0
npm: 11.16.0
Yarn: N/A
pnpm: N/A
Relevant Packages:
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 25.5.0: Mon Apr 27 20:39:42 PDT 2026; root:xnu-12377.121.6~2/RELEASE_ARM64_T6031
Available memory (MB): 65536
Available CPU cores: 16
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/ui/src/widgets/CollectionCards/index.tsx around the create-new card button and inspect how localized collection labels are passed to the translation call. Check the Button behavior that copies aria-label into title, then verify that both attributes use the translated label for localized collections without producing [object Object].
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, internationalization
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100