From 6379d3786354e0364f1548249f2a725f4629d908 Mon Sep 17 00:00:00 2001
From: "Vince Castillo, PhD"
 <154394560+ProfessorCastillo@users.noreply.github.com>
Date: Mon, 27 Jul 2026 01:15:12 -0400
Subject: [PATCH] fix: expose ConfirmDialog with dialog role and label its
 input (WCAG 4.1.2, 3.3.2) (#26769)

ConfirmDialog trapped focus and closed on Escape but its container was a plain
  div, so screen readers did not announce it as a modal dialog. Its text input
  also had only a placeholder, giving no persistent accessible name. Add
  role=dialog / aria-modal / aria-label / tabindex to the dialog surface and an
  aria-label to the textarea.

  Relates to #2790

Co-authored-by: Tim Baek <tim@openwebui.com>
---
 src/lib/components/common/ConfirmDialog.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/lib/components/common/ConfirmDialog.svelte b/src/lib/components/common/ConfirmDialog.svelte
index 2450a10d5a..8a336aa441 100644
--- a/src/lib/components/common/ConfirmDialog.svelte
+++ b/src/lib/components/common/ConfirmDialog.svelte
@@ -120,6 +120,10 @@
 		}}
 	>
 		<div
+			role="dialog"
+			aria-modal="true"
+			aria-label={title !== '' ? title : $i18n.t('Confirm your action')}
+			tabindex="-1"
 			class="m-auto max-w-full w-[32rem] mx-2 bg-white dark:bg-gray-950 rounded-3xl max-h-[100dvh] shadow-3xl border border-white dark:border-gray-900"
 			in:flyAndScale
 			on:mousedown={(e) => {
@@ -169,6 +173,7 @@
 							{:else}
 								<textarea
 									bind:value={_inputValue}
+									aria-label={inputPlaceholder ? inputPlaceholder : $i18n.t('Enter your message')}
 									placeholder={inputPlaceholder ? inputPlaceholder : $i18n.t('Enter your message')}
 									class="w-full mt-2 rounded-lg px-4 py-2 text-sm dark:text-gray-300 dark:bg-gray-900 outline-hidden resize-none"
 									rows="3"