feat(kon): add semantic HTML and ARIA labels — main wrapper, live regions, button labels

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/lib/pages/DictationPage.svelte

@@ -498,6 +498,9 @@
 </script>
 
 <div class="flex flex-col h-full animate-fade-in">
+  <div aria-live="assertive" class="sr-only" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">
+    {#if page.recording}Recording started{/if}
+  </div>
   {#if needsDownload}
     <ModelDownloader modelSize={settings.modelSize.toLowerCase()} onComplete={onModelDownloaded} />
   {:else}
@@ -514,6 +517,7 @@
               : 'bg-accent hover:bg-accent-hover shadow-[0_4px_20px_rgba(232,168,124,0.3)]'}"
         onclick={toggleRecording}
         disabled={modelLoading}
+        aria-label={page.recording ? "Stop recording" : "Start recording"}
       >
         {#if page.recording}
           <span class="w-[18px] h-[18px] rounded-[4px] bg-white"></span>
@@ -664,6 +668,8 @@
           bind:value={transcript}
           onclick={() => { showExportMenu = false; showTemplateMenu = false; }}
           data-no-transition
+          aria-label="Transcript"
+          aria-live="polite"
         ></textarea>
       </Card>
     </div>