payloadcms / payloadcms/payload

Card button aria-label and title not correctly localized

Open Beginner friendly
#17,069 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: core status: needs-triage v3
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
})

https://github.com/payloadcms/payload/blob/1dd2f979ed3457dc0cd3afd2f4c5428cd5d16889/packages/ui/src/widgets/CollectionCards/index.tsx#L106

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

Open the contributing guide

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.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.