696a86799d
NVDA+Chrome <2022 and VoiceOver iOS <16 need explicit aria-modal="true"; showModal() implicit modal semantics are not enough for older AT. One-line patch benefits all dialog uses. Refs #781 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
63 lines
1.8 KiB
Svelte
63 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { getConfirmService } from '$lib/shared/services/confirm.svelte.js';
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
// Context must already be set by the parent layout via provideConfirmService().
|
|
const service = getConfirmService();
|
|
|
|
let dialogEl: HTMLDialogElement;
|
|
|
|
$effect(() => {
|
|
if (service.options) {
|
|
dialogEl.showModal();
|
|
} else {
|
|
dialogEl.close();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<dialog
|
|
bind:this={dialogEl}
|
|
class="m-auto w-full max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg backdrop:bg-black/50"
|
|
aria-modal="true"
|
|
aria-labelledby="confirm-title"
|
|
oncancel={(e) => {
|
|
e.preventDefault();
|
|
service.settle(false);
|
|
}}
|
|
onclick={(e) => {
|
|
const opts = service.options;
|
|
if (!opts) return;
|
|
const closeOnBackdrop = opts.closeOnBackdrop ?? !opts.destructive;
|
|
if (closeOnBackdrop && e.target === dialogEl) {
|
|
service.settle(false);
|
|
}
|
|
}}
|
|
>
|
|
{#if service.options}
|
|
{@const opts = service.options}
|
|
<h2 id="confirm-title" class="mb-2 font-serif text-lg text-ink">{opts.title}</h2>
|
|
{#if opts.body !== undefined}
|
|
<p class="mb-6 text-sm text-ink-2">{opts.body}</p>
|
|
{/if}
|
|
<div class="flex items-center justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
class="min-h-[44px] cursor-pointer rounded-sm border border-line px-4 py-2 text-sm font-medium text-ink-2 transition-colors hover:bg-muted"
|
|
onclick={() => service.settle(false)}
|
|
>
|
|
{opts.cancelLabel ?? m.btn_cancel()}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="min-h-[44px] cursor-pointer rounded-sm px-4 py-2 text-sm font-medium transition-colors {opts.destructive
|
|
? 'bg-danger text-danger-fg hover:bg-danger/80'
|
|
: 'bg-primary text-primary-fg hover:bg-primary/80'}"
|
|
onclick={() => service.settle(true)}
|
|
>
|
|
{opts.confirmLabel ?? m.btn_confirm()}
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</dialog>
|