Fix screen readers announcing toasts

aria-atomic attribute specifically needs the "true" value to be read by screen readers, and VoiceOver requires the role "alert" for some reason
unovue · Jan 9, 2025 · 6f91b26 · 6f91b26
1 parent 194bf4b
commit 6f91b26
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/packages/radix-vue/src/Toast/ToastRootImpl.vue b/packages/radix-vue/src/Toast/ToastRootImpl.vue
@@ -170,9 +170,9 @@ provideToastRootContext({ onClose: handleClose })
 <template>
   <ToastAnnounce
     v-if="announceTextContent"
-    role="status"
+    role="alert"
     :aria-live="type === 'foreground' ? 'assertive' : 'polite'"
-    aria-atomic
+    aria-atomic="true"
   >
     {{ announceTextContent }}
   </ToastAnnounce>
@@ -183,9 +183,9 @@ provideToastRootContext({ onClose: handleClose })
   >
     <Primitive
       :ref="forwardRef"
-      role="status"
+      role="alert"
       aria-live="off"
-      aria-atomic
+      aria-atomic="true"
       tabindex="0"
       data-radix-vue-collection-item
       v-bind="$attrs"