From 47b005ad7043ca7b8a59a5cebf9384113f46a8f6 Mon Sep 17 00:00:00 2001 From: Jake Date: Thu, 7 May 2026 11:20:35 +0100 Subject: [PATCH] fix(a11y): bump record button to 48x48 and announce Recording stopped to screen readers Record button bumped from 40x40 to 48x48 (WCAG 2.5.5 AA requires 44x44; 48 chosen as forgivable oversize for the most-touched control). Inner stop-square and record-circle bumped 14x14 to 16x16, Loader2 16 to 18, to keep the visual ratio. Recording-status sr-only live region now announces both transitions: "Recording started" on start and "Recording stopped" on stop, with the stop message clearing after 1200ms so the live region does not hold stale text. Transition tracked via a plain let prevRecording (not $state) since it is bookkeeping and must not retrigger the effect. aria-atomic="true" added so the whole region re-reads on update. --- src/lib/pages/DictationPage.svelte | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/lib/pages/DictationPage.svelte b/src/lib/pages/DictationPage.svelte index 9dea383..4daa835 100644 --- a/src/lib/pages/DictationPage.svelte +++ b/src/lib/pages/DictationPage.svelte @@ -794,11 +794,27 @@ ); let transcriptionFailed = $state(false); + + // Screen-reader announcer for recording state transitions. + // Announces both start and stop, then clears so the live region does not + // hold stale text. prevRecording is a plain let (not $state) because it is + // bookkeeping and must not re-trigger the effect. + let recordingAnnouncement = $state(""); + let prevRecording = false; + $effect(() => { + if (page.recording && !prevRecording) { + recordingAnnouncement = "Recording started"; + } else if (!page.recording && prevRecording) { + recordingAnnouncement = "Recording stopped"; + setTimeout(() => { recordingAnnouncement = ""; }, 1200); + } + prevRecording = page.recording; + });
-
- {#if page.recording}Recording started{/if} +
+ {recordingAnnouncement}
{#if needsDownload}