fix: ConfirmDialog accessibility and standardize destructive action confirmations
- Add focus trap, Escape key handling, ARIA attributes to ConfirmDialog - Replace native confirm() with ConfirmDialog for stage, registry, user deletion - Add confirmation dialogs for env variable and volume deletion
This commit is contained in:
+18
-1
@@ -8,6 +8,7 @@
|
||||
import ToggleSwitch from '$lib/components/ToggleSwitch.svelte';
|
||||
import Skeleton from '$lib/components/Skeleton.svelte';
|
||||
import EmptyState from '$lib/components/EmptyState.svelte';
|
||||
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
|
||||
|
||||
let stages = $state<Stage[]>([]);
|
||||
let selectedStageId = $state('');
|
||||
@@ -27,6 +28,8 @@
|
||||
let editValue = $state('');
|
||||
let editEncrypted = $state(false);
|
||||
|
||||
let envDeleteTarget = $state<string | null>(null);
|
||||
|
||||
const projectId = $derived($page.params.id);
|
||||
|
||||
async function loadProject() {
|
||||
@@ -290,7 +293,7 @@
|
||||
<button type="button" class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-link)] transition-colors" onclick={() => startEdit(env)} title={$t('envEditor.edit')}>
|
||||
<IconEdit size={16} />
|
||||
</button>
|
||||
<button type="button" class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-red-50 hover:text-red-600 transition-colors" onclick={() => handleDelete(env.id)} title={$t('envEditor.delete')}>
|
||||
<button type="button" class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-red-50 hover:text-red-600 transition-colors" onclick={() => { envDeleteTarget = env.id; }} title={$t('envEditor.delete')}>
|
||||
<IconTrash size={16} />
|
||||
</button>
|
||||
</div>
|
||||
@@ -331,3 +334,17 @@
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
open={envDeleteTarget !== null}
|
||||
title={$t('envEditor.deleteTitle')}
|
||||
message={$t('envEditor.deleteMessage')}
|
||||
confirmLabel={$t('common.delete')}
|
||||
confirmVariant="danger"
|
||||
onconfirm={async () => {
|
||||
const envId = envDeleteTarget;
|
||||
envDeleteTarget = null;
|
||||
if (envId) await handleDelete(envId);
|
||||
}}
|
||||
oncancel={() => { envDeleteTarget = null; }}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user