fix: expose ConfirmDialog with dialog role and label its input (WCAG 4.1.2, 3.3.2)

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
This commit is contained in:
Vince Castillo 2026-07-04 09:06:40 -07:00
parent 10724d057a
commit bf19922563

View file

@ -116,6 +116,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/95 dark:bg-gray-950/95 backdrop-blur-sm rounded-4xl max-h-[100dvh] shadow-3xl border border-white dark:border-gray-900"
in:flyAndScale
on:mousedown={(e) => {
@ -165,6 +169,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"