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>
This commit is contained in:
co-authored by
Tim Baek
parent
e8f2c123e6
commit
6379d37863
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user