From 294273e2a7432ff8293c0f2a20137c9e2f2b30d6 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 14 May 2025 22:41:55 +0600
Subject: [PATCH] web/ProcessingStatus: refactor to svelte 5 & add aria label

---
 web/i18n/en/a11y/queue.json                   |  5 ++++
 .../components/queue/ProcessingStatus.svelte  | 28 +++++++++++++++----
 2 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 web/i18n/en/a11y/queue.json

diff --git a/web/i18n/en/a11y/queue.json b/web/i18n/en/a11y/queue.json
new file mode 100644
index 00000000..08e243f1
--- /dev/null
+++ b/web/i18n/en/a11y/queue.json
@@ -0,0 +1,5 @@
+{
+    "status.default": "processing queue",
+    "status.completed": "processing queue. all tasks are completed.",
+    "status.ongoing": "processing queue. ongoing tasks."
+}
diff --git a/web/src/components/queue/ProcessingStatus.svelte b/web/src/components/queue/ProcessingStatus.svelte
index d53d9dc8..bd0a7223 100644
--- a/web/src/components/queue/ProcessingStatus.svelte
+++ b/web/src/components/queue/ProcessingStatus.svelte
@@ -1,19 +1,37 @@
 <script lang="ts">
+    import { t } from "$lib/i18n/translations";
     import IconArrowDown from "@tabler/icons-svelte/IconArrowDown.svelte";
 
-    export let indeterminate = false;
-    export let progress: number = 0;
-    export let expandAction: () => void;
+    type Props = {
+        indeterminate?: boolean;
+        progress?: number;
+        expandAction: () => void;
+    }
 
-    $: progressStroke = `${progress}, 100`;
+    let {
+        indeterminate = false,
+        progress = $bindable(0),
+        expandAction
+    }: Props = $props();
+
+    let progressStroke = $derived(`${progress}, 100`);
     const indeterminateStroke = "15, 5";
+
+    let ariaState = $derived(
+        progress > 0 && progress < 100
+        ? "ongoing"
+        : progress >= 100
+            ? "completed"
+            : "default"
+    )
 </script>
 
 <button
     id="processing-status"
-    on:click={expandAction}
+    onclick={expandAction}
     class="button"
     class:completed={progress >= 100}
+    aria-label={$t(`a11y.queue.status.${ariaState}`)}
 >
     <svg
         id="progress-ring"