Change from attrs.role to props.role

packages/ui/src/components/va-toast/VaToast.vue

@@ -3,7 +3,7 @@
     <div
       v-show="visible"
       ref="rootElement"
-      :role="$attrs.role ?? $props.closeable ? 'alertdialog' : 'alert'"
+      :role="$props.role ?? $props.closeable ? 'alertdialog' : 'alert'"
       :aria-live="computedAriaLive"
       aria-atomic="true"
       class="va-toast"
@@ -48,6 +48,8 @@ import { useComponentPresetProp, useColors, useTimer, useTextColor, useTranslati
 
 import { ToastPosition } from './types'
 
+import { StringWithAutocomplete } from '../../utils/types/prop-type'
+
 import VaIcon from '../va-icon/VaIcon.vue'
 
 const VaToastRenderer = defineComponent({
@@ -84,8 +86,9 @@ export default defineComponent({
     },
     render: { type: Function },
     ariaCloseLabel: { type: String, default: '$t:close' },
+    role: { type: String as PropType<StringWithAutocomplete<'alert' | 'alertdialog' | 'status'>>, default: undefined },
   },
-  setup (props, { emit, attrs }) {
+  setup (props, { emit }) {
     const rootElement = shallowRef<HTMLElement>()
 
     const { getColor } = useColors()
@@ -115,13 +118,10 @@ export default defineComponent({
     }))
 
     const computedAriaLive = computed(() => {
-      const role = attrs.role
-      if (role === 'alert' || role === 'alertdialog') {
-        return 'assertive'
-      } else if (role === 'status') {
+      if (props.role === 'status') {
         return 'polite'
       } else {
-        return 'off'
+        return 'assertive'
       }
     })
 

packages/ui/src/utils/types/prop-type.ts

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue'
 
 /** This will accept any string, but will suggest all strings from `T`. Used for better IDE support in component props. */
-type StringWithAutocomplete<T> = T | (string & Record<never, never>)
+export type StringWithAutocomplete<T> = T | (string & Record<never, never>)
 
 // Make sure to make StringType as generic to prevent type unwrapping
 /**