fix(a11y): announce HistoryPage inline-confirm armed state and tag-chip pressed state

This commit is contained in:
2026-05-07 11:24:53 +01:00
parent 9b17425bc9
commit 736896c2b8

View File

@@ -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>