fix(Toast): announce title and description as text, not JSON (#2612)

humanbird · claude · web-flow · commit ebd2df21e0ba · 2026-04-27T11:38:57.000+08:00
The aria-live announcement region rendered `announceTextContent` (a `string[]` returned by `getAnnounceTextContent`) directly with `{{ … }}`. In Vue 3 that interpolation goes through `toDisplayString`, which JSON-stringifies arrays: isArray(val) ? JSON.stringify(val, replacer, 2) : ... So a toast with a `ToastTitle` and a `ToastDescription` ended up being announced as the literal string `[\n "Title",\n "Description"\n]` instead of `Title Description`. The pattern was ported 1:1 from Radix React, where `{children}` of a `string[]` happens to render as concatenated text nodes. Fix: render each chunk via `<template v-for>`, which preserves the "natural pause break between nodes" the comment in `utils.ts` already calls out as the intent. Adds a regression test that asserts the live region's `textContent` contains the toast title and does not contain JSON syntax characters. Closes #2611 Co-authored-by: humanbird <27631243+humanbird@users.noreply.github.com> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
diff --git a/packages/core/src/Toast/Toast.test.ts b/packages/core/src/Toast/Toast.test.ts
@@ -41,6 +41,31 @@ describe('given a default Toast', () => {
     expect(await axe(document.body)).toHaveNoViolations()
   })
 
+  it('should announce title and description as plain text (not JSON)', async () => {
+    await fireEvent.click(trigger.element)
+    await findByText(document.body, 'Scheduled: Catch up')
+
+    // ToastAnnounce renders the live region on the next animation frame
+    // (see ToastAnnounce.vue's useRafFn) — wait for two RAFs so it's
+    // guaranteed to be in the DOM.
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+    })
+
+    const liveRegion = document.querySelector('[role="alert"][aria-live]')
+    expect(liveRegion).toBeTruthy()
+    const text = liveRegion!.textContent ?? ''
+
+    // Vue's `{{ array }}` would JSON-stringify the announceTextContent
+    // array — guard against that regression by asserting the live region
+    // does not contain JSON syntax characters.
+    expect(text).not.toMatch(/[[\]"]/)
+
+    // The toast title and description must both be part of the announced
+    // text so screen-reader users actually hear the toast.
+    expect(text).toContain('Scheduled: Catch up')
+  })
+
   describe('after clicking the trigger', () => {
     beforeEach(async () => {
       fireEvent.click(trigger.element)
diff --git a/packages/core/src/Toast/ToastRootImpl.vue b/packages/core/src/Toast/ToastRootImpl.vue
@@ -183,7 +183,20 @@ provideToastRootContext({ onClose: handleClose })
     role="alert"
     :aria-live="type === 'foreground' ? 'assertive' : 'polite'"
   >
-    {{ announceTextContent }}
+    <!--
+      Render each chunk as its own text node so screen readers get the
+      natural pause break between nodes (see comment in utils.ts).
+      Interpolating the array directly with `{{ announceTextContent }}`
+      would route through Vue's `toDisplayString`, which JSON-stringifies
+      arrays — the live region would then announce literal `[`, quotes
+      and commas instead of the toast title and description.
+    -->
+    <template
+      v-for="(text, i) in announceTextContent"
+      :key="i"
+    >
+      {{ text }}
+    </template>
   </ToastAnnounce>
 
   <Teleport
