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>

src/lib/pages/FilesPage.svelte

@@ -214,6 +214,8 @@
         placeholder="Transcribed text will appear here..."
         bind:value={fileTranscript}
         data-no-transition
+        aria-label="File transcript"
+        aria-live="polite"
       ></textarea>
     </Card>
   </div>

src/lib/pages/TasksPage.svelte

@@ -232,6 +232,7 @@
 
   <!-- Bucket tabs + sort -->
   <div class="flex items-center gap-1 px-7 pb-3">
+    <nav aria-label="Task filters">
     {#each buckets as bucket}
       <button
         class="flex items-center gap-1.5 btn-md rounded-lg transition-colors
@@ -251,6 +252,7 @@
         {/if}
       </button>
     {/each}
+    </nav>
 
     <div class="flex-1"></div>
 
@@ -259,6 +261,7 @@
       <button
         class="flex items-center gap-1 px-2 py-1.5 rounded-lg text-[11px] text-text-tertiary hover:text-text-secondary hover:bg-hover"
         onclick={() => showSortMenu = !showSortMenu}
+        aria-label="Sort tasks"
       >
         <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M3 6h18M3 12h12M3 18h6" stroke-linecap="round" />
@@ -290,6 +293,7 @@
       <button
         class="flex items-center justify-center h-[32px] text-text-tertiary hover:text-text-secondary border-b border-border-subtle"
         onclick={() => sidebarCollapsed = !sidebarCollapsed}
+        aria-label={sidebarCollapsed ? "Expand list sidebar" : "Collapse list sidebar"}
       >
         <svg class="w-3 h-3 transition-transform {sidebarCollapsed ? 'rotate-180' : ''}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M15 18l-6-6 6-6" stroke-linecap="round" stroke-linejoin="round" />
@@ -494,6 +498,7 @@
                     {/if}
                   </div>
                   <button
+                    aria-label="Delete completed task"
                     class="mt-0.5 text-text-tertiary hover:text-danger opacity-0 group-hover:opacity-100 transition-opacity"
                     onclick={() => deleteTask(task.id)}
                   >

src/routes/+page.svelte

@@ -13,7 +13,7 @@
   });
 </script>
 
-<div class="h-full overflow-hidden">
+<main class="h-full overflow-hidden" aria-label="Kon application content">
   {#if page.current === "first-run"}
     <FirstRunPage />
   {:else if page.current === "dictation"}
@@ -27,4 +27,4 @@
   {:else if page.current === "settings"}
     <SettingsPage />
   {/if}
-</div>
+</main>