From 736896c2b88616b801b37c4c7e50924e58777032 Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Thu, 7 May 2026 11:24:53 +0100
Subject: [PATCH] fix(a11y): announce HistoryPage inline-confirm armed state
 and tag-chip pressed state

---
 src/lib/pages/HistoryPage.svelte | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/lib/pages/HistoryPage.svelte b/src/lib/pages/HistoryPage.svelte
index 174510f..2522e8e 100644
--- a/src/lib/pages/HistoryPage.svelte
+++ b/src/lib/pages/HistoryPage.svelte
@@ -95,6 +95,18 @@
     if (bulkDeleteArmTimer) { clearTimeout(bulkDeleteArmTimer); bulkDeleteArmTimer = null; }
   }
 
+  // Screen-reader announcement for the inline-confirm flows. The button
+  // morphs into Confirm/Cancel pills, which is silent to assistive tech;
+  // this derived feeds an aria-live region near the page root so the
+  // armed state is announced as it arms and disarms.
+  let confirmAnnouncement = $derived(
+    clearAllArmed
+      ? "Clear all armed. Click confirm to delete all history, or cancel to dismiss."
+      : bulkDeleteArmed
+        ? `Delete ${selected.size} ${selected.size === 1 ? 'transcript' : 'transcripts'} armed. Click confirm or cancel to dismiss.`
+        : ""
+  );
+
   onDestroy(() => {
     stopPlayback();
     if (clearAllArmTimer) clearTimeout(clearAllArmTimer);
@@ -569,6 +581,15 @@
 </script>
 
 <div class="flex flex-col h-full overflow-y-auto animate-fade-in">
+  <!-- Off-screen live region for inline-confirm announcements. Sits at
+       the page root so it persists while the morphed Confirm/Cancel
+       pills mount and unmount in the header and bulk toolbar. -->
+  <div
+    class="sr-only"
+    aria-live="polite"
+    aria-atomic="true"
+  >{confirmAnnouncement}</div>
+
   <!-- Header -->
   <div class="flex items-center gap-4 px-7 pt-6 pb-4">
     <h2 class="font-display text-[26px] italic text-text">History</h2>
@@ -647,6 +668,7 @@
         <button
           class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border border-accent text-[12px] text-accent bg-accent/10"
           onclick={() => (activeTagFilter = null)}
+          aria-pressed="true"
           title="Clear tag filter"
         >
           {activeTagFilter}
@@ -657,6 +679,7 @@
           <button
             class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border border-border-subtle text-[12px] text-text-secondary hover:border-accent hover:text-accent"
             onclick={() => (activeTagFilter = t.tag)}
+            aria-pressed={activeTagFilter === t.tag}
           >
             {t.tag}
             <span class="text-[12px] text-text-secondary">{t.count}</span>