Add WCAG 2.1 Level AA accessibility across all components

src/lib/components/MiniTimer.svelte

@@ -192,8 +192,7 @@ const fontStyle = $derived(
   });
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="w-full h-full flex items-center justify-center overflow-hidden">
+<div class="w-full h-full flex items-center justify-center overflow-hidden" role="status" aria-label="Mini timer: {timeText} {state === 'breakActive' ? 'break active' : state === 'running' ? 'running' : 'paused'}">
   <div
     style="
       width: {100 / zoomScale}%;
@@ -206,8 +205,10 @@ const fontStyle = $derived(
     class="flex items-center justify-center w-full h-full"
     style="padding: 22px 14px 22px 24px;"
   >
+  <!-- svelte-ignore a11y_no_static_element_interactions a11y_no_noninteractive_element_interactions -->
   <div
     class="mini-pill flex h-full w-full items-center select-none"
+    role="application"
     class:mini-draggable={draggable}
     style="
       background: rgba(0, 0, 0, 0.85);
@@ -226,6 +227,7 @@ const fontStyle = $derived(
   <div class="relative flex-shrink-0" style="width: {ringSize}px; height: {ringSize}px;">
     <!-- Glow SVG (larger for blur room) -->
     <svg
+      aria-hidden="true"
       width={viewSize}
       height={viewSize}
       class="pointer-events-none absolute"
@@ -295,6 +297,7 @@ const fontStyle = $derived(
 
     <!-- Non-glow SVG: track + crisp ring -->
     <svg
+      aria-hidden="true"
       width={ringSize}
       height={ringSize}
       class="absolute"