Skip to content

createToaster: the toast region's accessible name is unreachable, so it is always English #115

Closed

Description

@usirin

Summary

createToaster gives a consumer no way to name the toast region. Zag composes that name from a
label option, a placement string and a hotkey string, and the Toaster host never forwards the
option — so every app built on Manti announces its toast region in English, with a keyboard hint it
never chose to advertise.

On a Turkish-language app the rendered name is, verbatim:

Notifications, bottom-end (alt+T)

Where it comes from

@zag-js/toast@1.43.0, dist/toast-group.connect.mjs:16-26:

const { label = "Notifications" } = options;
const { hotkey } = prop("store").attrs;        // default ["altKey", "KeyT"]
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
return normalize.element({
  role: "region",
  "aria-label": `${label}, ${placement} (${hotkeyLabel})`,
  "aria-live": "polite",
  ...
});

getGroupProps takes those options. @manti-ui/react@0.9.0, dist/index.js:3800-3801, calls it
with none:

return /* @__PURE__ */ G(Y, { children: /* @__PURE__ */ G("div", {
  ...o.getGroupProps(),
  className: q(e),

So label stays "Notifications", and the placement and hotkey strings come through raw.

Why a consumer cannot work around it

  • ToasterProps is { className?: string } (dist/components/Toast/Toast.d.ts) — no prop
    passthrough onto the region element, so the emitted aria-label cannot be overridden by spreading
    something after it.
  • ToastTranslations carries exactly one field, closeTriggerLabel?: string. That fixes the close
    button and nothing else.

The only routes left to a consumer are patching the package or rewriting the attribute on the
portalled node from a ref/effect. Neither belongs in an app.

Suggested fix

Forward a translations/label option into getGroupProps from createToaster, e.g.

...o.getGroupProps({ label: n.regionLabel }),

with ToastTranslations growing a regionLabel?: string beside closeTriggerLabel. That keeps
every accessible string on this component in one options bag.

Worth deciding alongside it: whether the alt+T hint belongs in the name at all. It is a genuine
binding (toast-group.machine.mjs:150 really does listen for it), but a consumer that has not
documented the shortcut is advertising it to screen-reader users only. A hotkey: false — or simply
letting the consumer author the whole string — would cover that too.

Environment

  • @manti-ui/react@0.9.0
  • @zag-js/toast@1.43.0
  • React 19, placement: "bottom-end"

Filed from kamp.us (kamp-us/phoenix), where this is tracked as
kamp-us/phoenix#6777.

Activity

  1. self-assigned this
    on Sep 29, 2026
  2. tutkuofnight commented on Sep 29, 2026

    @tutkuofnight
    Member

    @usirin thanks for the detailed report, this is fixed in #125 and now on main.

    createToaster accepts translations.regionLabel, which is applied verbatim as the toast region's accessible name, so you author the whole string (including whether to mention the placement or the alt+T hotkey):

    createToaster({ translations: { regionLabel: 'Bildirimler' } });

    Partial translations also merge with the defaults now, so setting only regionLabel keeps the close button's Close label. It ships in the next @manti-ui/react patch release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions