diff --git a/.changeset/fix-snackbar-urgent-role.md b/.changeset/fix-snackbar-urgent-role.md new file mode 100644 index 000000000..51420b0d7 --- /dev/null +++ b/.changeset/fix-snackbar-urgent-role.md @@ -0,0 +1,7 @@ +--- +"@vuetify/v0": patch +--- + +fix(Snackbar): add an `urgent` prop that switches the live region to `role="alert"` (#624) + +Informational snackbars keep `role="status"` (a polite live region); setting `urgent` switches to `role="alert"` (assertive) so critical notifications interrupt assistive technology instead of waiting for it to go idle (WCAG 4.1.3, Status Messages). diff --git a/packages/0/src/components/Snackbar/SnackbarRoot.vue b/packages/0/src/components/Snackbar/SnackbarRoot.vue index 509f42c9b..b42c4ee1c 100644 --- a/packages/0/src/components/Snackbar/SnackbarRoot.vue +++ b/packages/0/src/components/Snackbar/SnackbarRoot.vue @@ -40,6 +40,8 @@ namespace?: string /** Unique identifier. Auto-generated if not provided. */ id?: ID + /** When true, sets role="alert" for urgent messages; otherwise role="status". */ + urgent?: boolean } export interface SnackbarRootSlotProps { @@ -61,7 +63,7 @@ default: (props: SnackbarRootSlotProps) => any }>() - const { as = 'div', namespace = 'v0:notifications', id = useId(), renderless } = defineProps() + const { as = 'div', namespace = 'v0:notifications', id = useId(), renderless, urgent } = defineProps() const queue = useSnackbarQueueContext(namespace, null) @@ -78,7 +80,7 @@ const slotProps = toRef((): SnackbarRootSlotProps => ({ id, attrs: { - role: 'status', + role: urgent ? 'alert' : 'status', }, }))