From 0a3e6d00589b1539d5a087a8ed1a81295a0804c3 Mon Sep 17 00:00:00 2001 From: Sai Sridhar Date: Thu, 16 Jul 2026 00:10:47 +0530 Subject: [PATCH 1/2] fix(Snackbar): add urgent prop to switch live-region role to alert (closes #615) Previously the live-region role was hardcoded to 'status', giving no way to signal urgency to assistive technologies. Add an `urgent` boolean prop on SnackbarRoot that switches the rendered role to 'alert' when true, satisfying WCAG 4.1.3 (Status Messages) for time-sensitive notifications. --- packages/0/src/components/Snackbar/SnackbarRoot.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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', }, })) From a4aeb8241c3c8403668cc3ef17f6239909ffc7bb Mon Sep 17 00:00:00 2001 From: John Leider Date: Thu, 16 Jul 2026 12:10:55 -0500 Subject: [PATCH 2/2] chore: add changeset for #624 a11y fix --- .changeset/fix-snackbar-urgent-role.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/fix-snackbar-urgent-role.md 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).