Bump version to 0.1.2

Add WCAG 2.1 Level AA accessibility across all components
A break timer designed to prevent RSI should be usable by people who already live with disabilities. This overhaul adds comprehensive accessibility without changing the visual design. Changes across 17 source files: - Global focus-visible outlines, sr-only utility, forced-colors support - prefers-reduced-motion kills all CSS animations AND JS Web Animations - All text upgraded to 4.5:1+ contrast ratio (WCAG AA) - Keyboard navigation for ColorPicker, Stepper, TimeSpinner - Screen reader: aria-live status regions, progressbar roles, labeled controls, sr-only chart data table, focus management on view changes - Focus trap on break screen, aria-hidden on decorative elements - Descriptive labels on all 25+ toggle/stepper instances in Settings - README updated with accessibility section and WCAG badge
2026-02-07 12:16:03 +02:00 · 2026-02-07 12:13:03 +02:00 · 2026-02-07 09:35:24 +00:00 · 2026-02-07 09:34:36 +00:00 · 2026-02-07 11:24:16 +02:00
21 changed files with 479 additions and 246 deletions
--- a/README.md
+++ b/README.md
@@ -21,10 +21,11 @@
  <img src="https://img.shields.io/badge/svelte-5-FF3E00?style=flat-square&logo=svelte&logoColor=white" alt="Svelte 5" />
  <img src="https://img.shields.io/badge/rust-2021-000000?style=flat-square&logo=rust&logoColor=white" alt="Rust" />
  <img src="https://img.shields.io/badge/tailwind-v4-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white" alt="Tailwind v4" />
+  <img src="https://img.shields.io/badge/WCAG_2.1-AA-228B22?style=flat-square" alt="WCAG 2.1 AA" />
 </p>

 <p align="center">
-  <a href="../../releases/latest"><strong>Download latest release</strong></a>
+  <a href="https://git.lashman.live/lashman/core-cooldown/releases"><strong>Download latest release</strong></a>
 </p>

 <br />
@@ -82,7 +83,7 @@ Tools for human wellbeing should never be enclosed, never be scarce, and never s
 <br />

 <p align="center">
-  <img src="screenshots/04-break.png" alt="Break Screen" width="420" /><br />
+  <img src="screenshots/04-break.png" alt="Break Screen" width="600" /><br />
  <sub><strong>Break Screen</strong> - Always-on-top break overlay with activity suggestions</sub>
 </p>

@@ -128,7 +129,7 @@ Tools for human wellbeing should never be enclosed, never be scarce, and never s

 ### 🧘 Break Activities

-Each break shows a randomized suggestion from a curated library of **70 activities** across four categories:
+Each break shows a randomized suggestion from a curated library of **72 activities** across four categories:

 | Category | Examples |
 |:---------|:---------|
@@ -239,6 +240,23 @@ Native Windows toast notifications for:

 <br />

+### ♿ Accessibility
+
+Core Cooldown targets **WCAG 2.1 Level AA** compliance. A break timer for preventing repetitive strain injury should be usable by everyone - including those who already live with disabilities.
+
+| | Feature | Description |
+|:--|:--------|:------------|
+| ⌨️ | **Full keyboard navigation** | Every control reachable and operable via keyboard alone. Arrow keys adjust color pickers, steppers, and time spinners. Tab/Shift+Tab cycles through all interactive elements. |
+| 🔍 | **Visible focus indicators** | Global `:focus-visible` outlines on all interactive elements - no hidden or suppressed focus rings |
+| 🗣️ | **Screen reader support** | `aria-live` regions announce timer state changes, break activities, and status updates. Progress rings use `role="progressbar"` with value text. Stats chart has a screen-reader-accessible data table. |
+| 🎯 | **Focus management** | View transitions move focus to the new view's heading. Break screen traps focus to prevent interaction with obscured content. |
+| 🎨 | **Color contrast** | All text meets 4.5:1 minimum contrast ratio against dark backgrounds (WCAG AA) |
+| 🖥️ | **Windows High Contrast** | `forced-colors: active` media query maps all theme tokens to system colors |
+| 🐢 | **Reduced motion** | `prefers-reduced-motion` disables all CSS animations/transitions *and* all JavaScript-driven Web Animations API effects. No functionality lost - just calmer. |
+| 🏷️ | **Descriptive labels** | All toggle switches, steppers, buttons, and form controls have descriptive accessible names instead of generic labels |
+
+<br />
+
 ---

 ## 📦 Portability
@@ -273,7 +291,7 @@ Core Cooldown is **fully portable**. The executable carries everything it needs

 That's it. No elevated permissions. No runtime dependencies. The first launch may take a moment while Windows initializes the WebView2 runtime.

-**[Download latest release →](../../releases/latest)**
+**[Download latest release →](https://git.lashman.live/lashman/core-cooldown/releases)**

 <br />

@@ -344,7 +362,7 @@ A split-architecture desktop app: Rust backend for system integration and timer

 ```
 ┌──────────────────────────────────────────────────────────────┐
-│                     🔲  System Tray                          │
+│                        System Tray                           │
 │              (dynamic icon · tooltip · menu)                 │
 ├──────────────────────────────────────────────────────────────┤
 │                                                              │
@@ -379,7 +397,8 @@ A split-architecture desktop app: Rust backend for system integration and timer
 | `config.rs` | Config struct with serde serialization, validation (clamping all values to safe ranges), portable file I/O |
 | `timer.rs` | Timer state machine (`Running` / `Paused` / `BreakActive`), idle detection via Windows API, working hours enforcement |
 | `stats.rs` | Daily break statistics, streak calculation, history queries |
-| `main.rs` | Entry point |
+| `main.rs` | Entry point, WebView2 Runtime detection |
+| `msvc_compat.rs` | MSVC CRT compatibility stubs for static WebView2Loader linking on MinGW |

 </details>

@@ -392,7 +411,7 @@ A split-architecture desktop app: Rust backend for system integration and timer
 | **Windows** | `BreakWindow` (standalone break modal), `MiniTimer` (floating mini mode) |
 | **Components** | `TimerRing`, `Titlebar`, `ToggleSwitch`, `Stepper`, `ColorPicker`, `FontSelector`, `TimeSpinner`, `BackgroundBlobs` |
 | **Stores** | `timer.ts` (reactive timer state from IPC events), `config.ts` (config with debounced auto-save) |
-| **Utilities** | `sounds.ts` (Web Audio synthesis), `activities.ts` (70 break activities), `animate.ts` (motion library) |
+| **Utilities** | `sounds.ts` (Web Audio synthesis), `activities.ts` (72 break activities), `animate.ts` (motion library) |

 </details>

@@ -400,10 +419,10 @@ A split-architecture desktop app: Rust backend for system integration and timer
 <summary><strong>IPC contract</strong></summary>

 **Commands** (frontend → backend):
-`get_config` · `save_config` · `update_pending_config` · `reset_config` · `toggle_timer` · `start_break_now` · `cancel_break` · `snooze` · `get_timer_state` · `set_view` · `get_stats` · `get_daily_history`
+`get_config` · `save_config` · `update_pending_config` · `reset_config` · `toggle_timer` · `start_break_now` · `cancel_break` · `snooze` · `get_timer_state` · `set_view` · `get_stats` · `get_daily_history` · `get_cursor_position` · `save_window_position`

 **Events** (backend → frontend):
-`timer-tick` · `break-started` · `break-ended` · `prebreak-warning` · `config-changed`
+`timer-tick` · `break-started` · `break-ended` · `prebreak-warning` · `config-changed` · `natural-break-detected`

 </details>

@@ -478,7 +497,7 @@ All settings stored in `config.json` next to the executable. The settings panel
 | `serde` / `serde_json` | Config and stats serialization |
 | `chrono` | Date/time handling for schedules and statistics |
 | `anyhow` | Error handling |
-| `winapi` | Windows idle detection (`GetLastInputInfo`) |
+| `winapi` | Windows idle detection (`GetLastInputInfo`), WebView2 check dialog |

 </details>

@@ -510,7 +529,7 @@ No contribution agreements to sign. No corporate CLAs. No licensing traps. Every

 - 🐛 Report bugs or rough edges
 - 🧘 Suggest new break activities (especially with physiotherapy or ergonomics knowledge)
- ♿ Improve accessibility
+- ♿ Improve accessibility (WCAG 2.1 AA foundation is in place - help us push further)
 - 🐧 Port idle detection to macOS/Linux
 - 🌍 Translate the interface
 - 💌 Share it with someone who needs it
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "core-cooldown",
  "private": true,
-  "version": "0.1.1",
+  "version": "0.1.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -480,11 +480,10 @@ dependencies = [

 [[package]]
 name = "core-cooldown"
-version = "0.1.0"
+version = "0.1.1"
 dependencies = [
 "anyhow",
 "chrono",
- "dirs 5.0.1",
 "serde",
 "serde_json",
 "tauri",
@@ -683,34 +682,13 @@ dependencies = [
 "crypto-common",
 ]

-[[package]]
-name = "dirs"
-version = "5.0.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "44c45a9d03d6676652bcb5e724c7e988de1acad23a711b5217ab9cbecbec2225"
-dependencies = [
- "dirs-sys 0.4.1",
-]
-
 [[package]]
 name = "dirs"
 version = "6.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c3e8aa94d75141228480295a7d0e7feb620b1a5ad9f12bc40be62411e38cce4e"
 dependencies = [
- "dirs-sys 0.5.0",
-]
-
-[[package]]
-name = "dirs-sys"
-version = "0.4.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "520f05a5cbd335fae5a99ff7a6ab8627577660ee5cfd6a94a6a929b52ff0321c"
-dependencies = [
- "libc",
- "option-ext",
- "redox_users 0.4.6",
- "windows-sys 0.48.0",
+ "dirs-sys",
 ]

 [[package]]
@@ -721,7 +699,7 @@ checksum = "e01a3366d27ee9890022452ee61b2b63a67e6f13f58900b651ff5665f0bb1fab"
 dependencies = [
 "libc",
 "option-ext",
- "redox_users 0.5.2",
+ "redox_users",
 "windows-sys 0.61.2",
 ]

@@ -2936,17 +2914,6 @@ dependencies = [
 "bitflags 2.10.0",
 ]

-[[package]]
-name = "redox_users"
-version = "0.4.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ba009ff324d1fc1b900bd1fdb31564febe58a8ccc8a6fdbb93b543d33b13ca43"
-dependencies = [
- "getrandom 0.2.17",
- "libredox",
- "thiserror 1.0.69",
-]
-
 [[package]]
 name = "redox_users"
 version = "0.5.2"
@@ -3637,7 +3604,7 @@ dependencies = [
 "anyhow",
 "bytes",
 "cookie",
- "dirs 6.0.0",
+ "dirs",
 "dunce",
 "embed_plist",
 "getrandom 0.3.4",
@@ -3687,7 +3654,7 @@ checksum = "ca7bd893329425df750813e95bd2b643d5369d929438da96d5bbb7cc2c918f74"
 dependencies = [
 "anyhow",
 "cargo_toml",
- "dirs 6.0.0",
+ "dirs",
 "glob",
 "heck 0.5.0",
 "json-patch",
@@ -4238,7 +4205,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a5e85aa143ceb072062fc4d6356c1b520a51d636e7bc8e77ec94be3608e5e80c"
 dependencies = [
 "crossbeam-channel",
- "dirs 6.0.0",
+ "dirs",
 "libappindicator",
 "muda",
 "objc2",
@@ -4812,15 +4779,6 @@ dependencies = [
 "windows-targets 0.42.2",
 ]

-[[package]]
-name = "windows-sys"
-version = "0.48.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "677d2418bec65e3338edb076e806bc1ec15693c5d0104683f2efe857f61056a9"
-dependencies = [
- "windows-targets 0.48.5",
-]
-
 [[package]]
 name = "windows-sys"
 version = "0.59.0"
@@ -4863,21 +4821,6 @@ dependencies = [
 "windows_x86_64_msvc 0.42.2",
 ]

-[[package]]
-name = "windows-targets"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9a2fa6e2155d7247be68c096456083145c183cbbbc2764150dda45a87197940c"
-dependencies = [
- "windows_aarch64_gnullvm 0.48.5",
- "windows_aarch64_msvc 0.48.5",
- "windows_i686_gnu 0.48.5",
- "windows_i686_msvc 0.48.5",
- "windows_x86_64_gnu 0.48.5",
- "windows_x86_64_gnullvm 0.48.5",
- "windows_x86_64_msvc 0.48.5",
-]
-
 [[package]]
 name = "windows-targets"
 version = "0.52.6"
@@ -4935,12 +4878,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "597a5118570b68bc08d8d59125332c54f1ba9d9adeedeef5b99b02ba2b0698f8"

-[[package]]
-name = "windows_aarch64_gnullvm"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2b38e32f0abccf9987a4e3079dfb67dcd799fb61361e53e2882c3cbaf0d905d8"
-
 [[package]]
 name = "windows_aarch64_gnullvm"
 version = "0.52.6"
@@ -4959,12 +4896,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e08e8864a60f06ef0d0ff4ba04124db8b0fb3be5776a5cd47641e942e58c4d43"

-[[package]]
-name = "windows_aarch64_msvc"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dc35310971f3b2dbbf3f0690a219f40e2d9afcf64f9ab7cc1be722937c26b4bc"
-
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.52.6"
@@ -4983,12 +4914,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c61d927d8da41da96a81f029489353e68739737d3beca43145c8afec9a31a84f"

-[[package]]
-name = "windows_i686_gnu"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a75915e7def60c94dcef72200b9a8e58e5091744960da64ec734a6c6e9b3743e"
-
 [[package]]
 name = "windows_i686_gnu"
 version = "0.52.6"
@@ -5019,12 +4944,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "44d840b6ec649f480a41c8d80f9c65108b92d89345dd94027bfe06ac444d1060"

-[[package]]
-name = "windows_i686_msvc"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8f55c233f70c4b27f66c523580f78f1004e8b5a8b659e05a4eb49d4166cca406"
-
 [[package]]
 name = "windows_i686_msvc"
 version = "0.52.6"
@@ -5043,12 +4962,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8de912b8b8feb55c064867cf047dda097f92d51efad5b491dfb98f6bbb70cb36"

-[[package]]
-name = "windows_x86_64_gnu"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "53d40abd2583d23e4718fddf1ebec84dbff8381c07cae67ff7768bbf19c6718e"
-
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.52.6"
@@ -5067,12 +4980,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "26d41b46a36d453748aedef1486d5c7a85db22e56aff34643984ea85514e94a3"

-[[package]]
-name = "windows_x86_64_gnullvm"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0b7b52767868a23d5bab768e390dc5f5c55825b6d30b86c844ff2dc7414044cc"
-
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.52.6"
@@ -5091,12 +4998,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9aec5da331524158c6d1a4ac0ab1541149c0b9505fde06423b02f5ef0106b9f0"

-[[package]]
-name = "windows_x86_64_msvc"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ed94fce61571a4006852b7389a063ab983c02eb1bb37b47f8272ce92d06d9538"
-
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.52.6"
@@ -5159,7 +5060,7 @@ dependencies = [
 "block2",
 "cookie",
 "crossbeam-channel",
- "dirs 6.0.0",
+ "dirs",
 "dpi",
 "dunce",
 "gdkx11",
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "core-cooldown"
-version = "0.1.1"
+version = "0.1.2"
 edition = "2021"

 [lib]
@@ -17,7 +17,6 @@ tauri-plugin-notification = "2"
 tauri-plugin-global-shortcut = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
-dirs = "5"
 chrono = "0.4"
 anyhow = "1"

--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
  "$schema": "https://raw.githubusercontent.com/tauri-apps/tauri/dev/crates/tauri-config-schema/schema.json",
  "productName": "Core Cooldown",
-  "version": "0.1.1",
+  "version": "0.1.2",
  "identifier": "com.corecooldown.app",
  "build": {
    "frontendDist": "../dist",
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -52,10 +52,28 @@
    };
  });

-  // Transition parameters
-  const DURATION = 700;
+  // Reduced motion preference
+  let reducedMotion = $state(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  $effect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = (e: MediaQueryListEvent) => { reducedMotion = e.matches; };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  });
+
+  // Transition parameters — zero when reduced motion active
+  const DURATION = $derived(reducedMotion ? 0 : 700);
  const easing = cubicOut;

+  // Focus management: move focus to new view's heading on view change
+  $effect(() => {
+    const _view = effectiveView;
+    requestAnimationFrame(() => {
+      const heading = document.querySelector("h1[tabindex='-1']") as HTMLElement | null;
+      heading?.focus({ preventScroll: true });
+    });
+  });
+
  // When fullscreen_mode is OFF, the separate break window handles breaks,
  // so the main window should keep showing whatever view it was on (dashboard).
  const effectiveView = $derived(
@@ -65,7 +83,7 @@
  );
 </script>

-<div class="relative h-full bg-black">
+<main class="relative h-full bg-black">
  {#if $config.background_blobs_enabled}
    <BackgroundBlobs accentColor={$config.accent_color} breakColor={$config.break_color} />
  {/if}
@@ -115,4 +133,4 @@
      </div>
    {/if}
  </div>
-</div>
+</main>
--- a/src/app.css
+++ b/src/app.css
@@ -14,7 +14,7 @@
  --color-warning: #f0a500;
  --color-danger: #f85149;
  --color-text-pri: #ffffff;
-  --color-text-sec: #777777;
+  --color-text-sec: #8a8a8a;
  --color-text-dim: #3a3a3a;
  --color-caption-bg: #050505;
 }
@@ -55,3 +55,51 @@ body {
 ::-webkit-scrollbar-thumb:hover {
  background: #333;
 }
+
+/* ── Accessibility: Screen-reader only ── */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ── Accessibility: Focus indicators ── */
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+/* ── Accessibility: Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ── Accessibility: Windows High Contrast ── */
+@media (forced-colors: active) {
+  :root {
+    --color-bg: Canvas;
+    --color-surface: Canvas;
+    --color-card: Canvas;
+    --color-card-lt: Canvas;
+    --color-border: ButtonBorder;
+    --color-accent: Highlight;
+    --color-accent-lt: Highlight;
+    --color-text-pri: CanvasText;
+    --color-text-sec: CanvasText;
+    --color-text-dim: GrayText;
+    --color-success: Highlight;
+    --color-warning: Highlight;
+    --color-danger: LinkText;
+  }
+}
--- a/src/lib/components/BackgroundBlobs.svelte
+++ b/src/lib/components/BackgroundBlobs.svelte
@@ -5,9 +5,17 @@
  }

  let { accentColor, breakColor }: Props = $props();
+
+  let reducedMotion = $state(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  $effect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = (e: MediaQueryListEvent) => { reducedMotion = e.matches; };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  });
 </script>

-<div class="pointer-events-none absolute inset-0 overflow-hidden">
+<div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
  <!-- Gradient blobs -->
  <div
    class="blob blob-1"
@@ -30,6 +38,7 @@
  <svg class="absolute inset-0 h-full w-full" style="opacity: 0.08; mix-blend-mode: overlay;">
    <filter id="grain-filter">
      <feTurbulence type="fractalNoise" baseFrequency="0.45" numOctaves="3" stitchTiles="stitch">
+        {#if !reducedMotion}
          <animate
            attributeName="seed"
            from="0"
@@ -37,6 +46,7 @@
            dur="2s"
            repeatCount="indefinite"
          />
+        {/if}
      </feTurbulence>
    </filter>
    <rect width="100%" height="100%" filter="url(#grain-filter)" />
--- a/src/lib/components/BreakScreen.svelte
+++ b/src/lib/components/BreakScreen.svelte
@@ -4,6 +4,7 @@
  import { timer, currentView, formatTime, type TimerSnapshot } from "../stores/timer";
  import { config } from "../stores/config";
  import TimerRing from "./TimerRing.svelte";
+  import { onMount } from "svelte";
  import { scaleIn, fadeIn, pressable } from "../utils/animate";
  import { pickRandomActivity, getCategoryIcon, getCategoryLabel, type BreakActivity } from "../utils/activities";

@@ -70,14 +71,36 @@
  );

  const isModal = $derived(!$config.fullscreen_mode && !standalone);
+
+  // Focus trap: keep Tab cycling within break screen
+  let breakContainer = $state<HTMLElement>(undefined!);
+  $effect(() => {
+    if (!breakContainer) return;
+    function trapFocus(e: KeyboardEvent) {
+      if (e.key !== "Tab") return;
+      const focusable = breakContainer.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+      } else {
+        if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+      }
+    }
+    breakContainer.addEventListener("keydown", trapFocus);
+    return () => breakContainer.removeEventListener("keydown", trapFocus);
+  });
 </script>

 {#if standalone}
  <!-- ── Standalone break window: horizontal card, transparent background ── -->
-  <div class="standalone-card" use:scaleIn={{ duration: 0.5 }}>
+  <div class="standalone-card" use:scaleIn={{ duration: 0.5 }} bind:this={breakContainer}>
    <!-- Ripples emanate from the ring, visible outside the card -->
    <div class="standalone-ring-area">
-      <div class="ripple-container">
+      <div class="ripple-container" aria-hidden="true">
        <div class="break-ripple ripple-1" style="--ripple-color: {$config.break_color}"></div>
        <div class="break-ripple ripple-2" style="--ripple-color: {$config.break_color}"></div>
        <div class="break-ripple ripple-3" style="--ripple-color: {$config.break_color}"></div>
@@ -88,6 +111,8 @@
          size={140}
          strokeWidth={5}
          accentColor={$config.break_color}
+          label="Break timer"
+          valueText="{formatTime($timer.breakTimeRemaining)} remaining"
        >
          <div class="break-breathe-counter">
            <span
@@ -103,19 +128,19 @@

    <!-- Right side: text + buttons -->
    <div class="standalone-content">
-      <h2 class="text-[17px] font-medium text-white mb-1.5">
+      <h2 class="text-[17px] font-medium text-white mb-1.5" tabindex="-1">
        {$timer.breakTitle}
      </h2>
-      <p class="text-[12px] leading-relaxed text-[#666] mb-4 max-w-[240px]">
+      <p class="text-[12px] leading-relaxed text-[#8a8a8a] mb-4 max-w-[240px]">
        {$timer.breakMessage}
      </p>

      {#if $config.show_break_activities}
        <div class="rounded-xl border border-[#ffffff08] bg-[#ffffff06] px-4 py-2.5 mb-4 max-w-[260px]">
-          <div class="text-[9px] font-medium tracking-[0.15em] text-[#555] uppercase mb-1">
+          <div class="text-[9px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase mb-1">
            {getCategoryLabel(currentActivity.category)}
          </div>
-          <p class="text-[12px] leading-relaxed text-[#999]">
+          <p class="text-[12px] leading-relaxed text-[#999]" aria-live="polite">
            {currentActivity.text}
          </p>
        </div>
@@ -126,9 +151,9 @@
          <button
            use:pressable
            class="rounded-full border border-[#333] px-5 py-2 text-[11px]
-                   tracking-wider text-[#666] uppercase
+                   tracking-wider text-[#8a8a8a] uppercase
                   transition-colors duration-200
-                   hover:border-[#444] hover:text-[#aaa]"
+                   hover:border-[#444] hover:text-[#ccc]"
            onclick={cancelBreak}
          >
            {cancelBtnText}
@@ -147,7 +172,7 @@
          {/if}
        </div>
        {#if $config.snooze_limit > 0}
-          <p class="mt-2 text-[9px] text-[#333]">
+          <p class="mt-2 text-[9px] text-[#8a8a8a]">
            {$timer.snoozesUsed}/{$config.snooze_limit} snoozes used
          </p>
        {/if}
@@ -155,7 +180,7 @@
    </div>

    <!-- Bottom progress bar with clip-path -->
-    <div class="standalone-progress-container">
+    <div class="standalone-progress-container" role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round($timer.breakProgress * 100)} aria-label="Break progress">
      <div class="standalone-progress-track">
        <div
          class="h-full transition-[width] duration-1000 ease-linear"
@@ -170,6 +195,7 @@
  <div
    class="relative h-full flex items-center justify-center"
    style="background: #000;"
+    bind:this={breakContainer}
  >
    <div
      class="relative flex flex-col items-center"
@@ -177,7 +203,7 @@
    >
      <!-- Break ring with breathing pulse + ripples -->
      <div class="mb-6 relative" use:scaleIn={{ duration: 0.6, delay: 0.1 }}>
-        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+        <div class="absolute inset-0 flex items-center justify-center pointer-events-none" aria-hidden="true">
          <div class="break-ripple ripple-1" style="--ripple-color: {$config.break_color}; --ripple-size: {isModal ? 160 : 200}px"></div>
          <div class="break-ripple ripple-2" style="--ripple-color: {$config.break_color}; --ripple-size: {isModal ? 160 : 200}px"></div>
          <div class="break-ripple ripple-3" style="--ripple-color: {$config.break_color}; --ripple-size: {isModal ? 160 : 200}px"></div>
@@ -189,6 +215,8 @@
            size={isModal ? 160 : 200}
            strokeWidth={isModal ? 5 : 6}
            accentColor={$config.break_color}
+            label="Break timer"
+            valueText="{formatTime($timer.breakTimeRemaining)} remaining"
          >
            <div class="break-breathe-counter">
              <span
@@ -204,12 +232,12 @@
        </div>
      </div>

-      <h2 class="mb-2 text-lg font-medium text-white" use:fadeIn={{ delay: 0.25, y: 10 }}>
+      <h2 class="mb-2 text-lg font-medium text-white" tabindex="-1" use:fadeIn={{ delay: 0.25, y: 10 }}>
        {$timer.breakTitle}
      </h2>

      <p
-        class="max-w-[300px] text-center text-[13px] leading-relaxed text-[#555]"
+        class="max-w-[300px] text-center text-[13px] leading-relaxed text-[#8a8a8a]"
        class:mb-4={$config.show_break_activities}
        class:mb-8={!$config.show_break_activities}
        use:fadeIn={{ delay: 0.35, y: 10 }}
@@ -222,10 +250,10 @@
          class="mb-8 mx-auto max-w-[320px] rounded-2xl border border-[#1a1a1a] bg-[#0a0a0a] px-5 py-3.5 text-center"
          use:fadeIn={{ delay: 0.4, y: 10 }}
        >
-          <div class="mb-1.5 text-[10px] font-medium tracking-[0.15em] text-[#444] uppercase">
+          <div class="mb-1.5 text-[10px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase">
            {getCategoryLabel(currentActivity.category)}
          </div>
-          <p class="text-[13px] leading-relaxed text-[#999]">
+          <p class="text-[13px] leading-relaxed text-[#999]" aria-live="polite">
            {currentActivity.text}
          </p>
        </div>
@@ -236,9 +264,9 @@
          <button
            use:pressable
            class="rounded-full border border-[#222] px-6 py-2.5 text-[12px]
-                   tracking-wider text-[#555] uppercase
+                   tracking-wider text-[#8a8a8a] uppercase
                   transition-colors duration-200
-                   hover:border-[#333] hover:text-[#999]"
+                   hover:border-[#333] hover:text-[#ccc]"
            onclick={cancelBreak}
          >
            {cancelBtnText}
@@ -257,7 +285,7 @@
          {/if}
        </div>
        {#if $config.snooze_limit > 0}
-          <p class="mt-3 text-[10px] text-[#2a2a2a]">
+          <p class="mt-3 text-[10px] text-[#8a8a8a]">
            {$timer.snoozesUsed}/{$config.snooze_limit} snoozes used
          </p>
        {/if}
@@ -265,7 +293,7 @@

      <!-- Bottom progress bar for modal -->
      {#if isModal}
-        <div class="break-modal-progress-container">
+        <div class="break-modal-progress-container" role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round($timer.breakProgress * 100)} aria-label="Break progress">
          <div class="break-modal-progress-track">
            <div
              class="h-full transition-[width] duration-1000 ease-linear"
@@ -278,7 +306,7 @@

    <!-- Fullscreen progress bar - anchored to bottom of screen -->
    {#if !isModal}
-      <div class="absolute bottom-8 left-12 right-12 h-[3px] rounded-full overflow-hidden">
+      <div class="absolute bottom-8 left-12 right-12 h-[3px] rounded-full overflow-hidden" role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round($timer.breakProgress * 100)} aria-label="Break progress">
        <div class="w-full h-full" style="background: rgba(255,255,255,0.03);">
          <div
            class="h-full transition-[width] duration-1000 ease-linear"
--- a/src/lib/components/ColorPicker.svelte
+++ b/src/lib/components/ColorPicker.svelte
@@ -182,6 +182,45 @@

  const isPreset = $derived(presets.includes(value));

+  // Color name lookup for accessible swatch labels
+  const colorNames: Record<string, string> = {
+    "#ff4d00": "Orange", "#ff6b35": "Tangerine", "#e63946": "Red", "#d62828": "Dark Red",
+    "#f77f00": "Amber", "#fcbf49": "Gold", "#2ec4b6": "Teal", "#3fb950": "Green",
+    "#7c6aef": "Purple", "#9b5de5": "Violet", "#4361ee": "Blue", "#4895ef": "Sky Blue",
+    "#f72585": "Pink", "#ff006e": "Hot Pink", "#ffffff": "White", "#888888": "Gray",
+    "#06d6a0": "Mint", "#80ed99": "Light Green", "#fca311": "Marigold", "#ffbe0b": "Yellow",
+  };
+
+  function getColorName(hex: string): string {
+    return colorNames[hex.toLowerCase()] ?? hex;
+  }
+
+  // Keyboard handlers for SL pad
+  function handleSLKeydown(e: KeyboardEvent) {
+    let handled = true;
+    switch (e.key) {
+      case "ArrowRight": sat = Math.min(100, sat + 5); break;
+      case "ArrowLeft": sat = Math.max(0, sat - 5); break;
+      case "ArrowUp": light = Math.min(100, light + 5); break;
+      case "ArrowDown": light = Math.max(0, light - 5); break;
+      default: handled = false;
+    }
+    if (handled) { e.preventDefault(); updateFromHSL(); }
+  }
+
+  // Keyboard handlers for Hue bar
+  function handleHueKeydown(e: KeyboardEvent) {
+    let handled = true;
+    switch (e.key) {
+      case "ArrowRight": hue = Math.min(360, hue + 5); break;
+      case "ArrowLeft": hue = Math.max(0, hue - 5); break;
+      case "ArrowUp": hue = Math.min(360, hue + 5); break;
+      case "ArrowDown": hue = Math.max(0, hue - 5); break;
+      default: handled = false;
+    }
+    if (handled) { e.preventDefault(); updateFromHSL(); }
+  }
+
  // SL cursor position
  const slX = $derived(sat);
  const slY = $derived(100 - light);
@@ -192,7 +231,7 @@
  <div class="flex items-center justify-between">
    <div>
      <div class="text-[13px] text-white">{label}</div>
-      <div class="font-mono text-[11px] text-[#444]">{value}</div>
+      <div class="font-mono text-[11px] text-[#8a8a8a]">{value}</div>
    </div>
    <div
      class="h-6 w-6 rounded-full border border-[#333] shadow-[0_0_8px_0px] transition-shadow duration-300"
@@ -211,7 +250,7 @@
                 : 'hover:scale-110 opacity-80 hover:opacity-100'}"
        style="background: {color};"
        onclick={() => selectPreset(color)}
-        aria-label="Select {color}"
+        aria-label="Select {getColorName(color)}"
      ></button>
    {/each}

@@ -235,7 +274,7 @@
      transition:slide={{ duration: 280, easing: cubicOut }}
    >
      <!-- Saturation / Lightness pad -->
-      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex a11y_no_noninteractive_element_interactions -->
      <div
        bind:this={slPad}
        class="relative h-[120px] w-full cursor-crosshair rounded-lg overflow-hidden touch-none"
@@ -244,9 +283,10 @@
        onpointermove={handleSLPointerMove}
        onpointerup={handleSLPointerUp}
        onpointercancel={handleSLPointerUp}
+        onkeydown={handleSLKeydown}
        role="application"
-        aria-label="Saturation and lightness"
-        tabindex="-1"
+        aria-label="Saturation and lightness. Use arrow keys to adjust."
+        tabindex="0"
      >
        <!-- Lightness overlay: white at top, black at bottom -->
        <div
@@ -262,7 +302,7 @@
      </div>

      <!-- Hue bar -->
-      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex a11y_no_noninteractive_element_interactions -->
      <div
        bind:this={hueBar}
        class="relative h-[16px] w-full cursor-pointer rounded-full overflow-hidden touch-none"
@@ -273,9 +313,10 @@
        onpointermove={handleHuePointerMove}
        onpointerup={handleHuePointerUp}
        onpointercancel={handleHuePointerUp}
+        onkeydown={handleHueKeydown}
        role="application"
-        aria-label="Hue"
-        tabindex="-1"
+        aria-label="Hue. Use arrow keys to adjust."
+        tabindex="0"
      >
        <!-- Hue cursor -->
        <div
@@ -288,8 +329,9 @@
      <!-- Hex input -->
      <input
        type="text"
+        aria-label="Hex color value"
        class="w-full rounded-lg border border-[#1a1a1a] bg-black px-3 py-1.5 text-[12px]
-               font-mono text-white outline-none
+               font-mono text-white
               placeholder:text-[#333] focus:border-[#333]"
        placeholder="#ff4d00"
        value={hexInput}
--- a/src/lib/components/Dashboard.svelte
+++ b/src/lib/components/Dashboard.svelte
@@ -37,6 +37,16 @@
          : "PAUSED",
  );

+  // Track status changes for aria-live region (announce only on change, not every tick)
+  let lastAnnouncedStatus = $state("");
+  let statusAnnouncement = $state("");
+  $effect(() => {
+    if (statusText !== lastAnnouncedStatus) {
+      lastAnnouncedStatus = statusText;
+      statusAnnouncement = `Timer status: ${statusText}. ${formatTime($timer.timeRemaining)} remaining.`;
+    }
+  });
+
  const toggleBtnText = $derived(
    $timer.state === "running" ? "PAUSE" : "START",
  );
@@ -87,6 +97,9 @@

 <svelte:window bind:innerWidth={windowW} bind:innerHeight={windowH} />

+<h1 class="sr-only" tabindex="-1">Dashboard</h1>
+<div aria-live="polite" class="sr-only">{statusAnnouncement}</div>
+
 <div class="relative flex h-full flex-col items-center justify-center">
  <!-- Outer: responsive scaling (JS-driven), Inner: mount animation -->
  <div style="transform: scale({ringScale}); transform-origin: center center; margin-bottom: {ringMargin}px;">
@@ -96,17 +109,20 @@
        size={280}
        strokeWidth={8}
        accentColor={$config.accent_color}
+        label="Focus timer"
+        valueText="{formatTime($timer.timeRemaining)} remaining"
      >
        <!-- Counter-scale wrapper: text shrinks less than ring -->
        <div style="transform: scale({textCounterScale}); transform-origin: center center;">
          <!-- Eye icon -->
          <svg
+            aria-hidden="true"
            class="mx-auto mb-3 eye-blink"
            width="26"
            height="26"
            viewBox="0 0 24 24"
            fill="none"
-            stroke="#444"
+            stroke="#888"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
@@ -130,10 +146,7 @@
          <!-- Status label -->
          <span
            class="block text-center text-[11px] font-medium tracking-[0.25em]"
-            class:text-[#444]={!$timer.prebreakWarning &&
-              $timer.state === "running"}
-            class:text-[#333]={!$timer.prebreakWarning &&
-              $timer.state === "paused"}
+            class:text-[#8a8a8a]={!$timer.prebreakWarning}
            class:text-warning={$timer.prebreakWarning}
          >
            {statusText}
@@ -146,7 +159,7 @@
  <!-- Last break info -->
  <div use:fadeIn={{ delay: 0.4, y: 10 }}>
    {#if $timer.hasHadBreak}
-      <p style="margin-bottom: {ringMargin}px;" class="text-[12px] text-[#2a2a2a]">
+      <p style="margin-bottom: {ringMargin}px;" class="text-[12px] text-[#8a8a8a]">
        Last break {formatDurationAgo($timer.secondsSinceLastBreak)}
      </p>
    {:else}
@@ -157,12 +170,13 @@
  <!-- Natural break notification toast -->
  {#if showNaturalBreakToast}
    <div
+      role="alert"
      class="absolute top-6 left-1/2 -translate-x-1/2 rounded-2xl border px-5 py-3 text-center backdrop-blur-xl transition-all duration-500"
      style="border-color: rgba(63, 185, 80, 0.3); background: rgba(63, 185, 80, 0.1);"
      use:scaleIn={{ duration: 0.3, delay: 0 }}
    >
      <div class="flex items-center gap-2">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3fb950" stroke-width="2">
+        <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3fb950" stroke-width="2">
          <path d="M20 6L9 17l-5-5"/>
        </svg>
        <span class="text-[13px] text-[#3fb950]">Natural break detected - timer reset</span>
@@ -190,12 +204,13 @@
      aria-label="Start break now"
      use:pressable
      class="flex h-11 w-11 items-center justify-center rounded-full
-             border border-[#222] text-[#383838]
+             border border-[#222] text-[#8a8a8a]
             transition-colors duration-200
-             hover:border-[#333] hover:text-[#666]"
+             hover:border-[#333] hover:text-[#aaa]"
      onclick={startBreakNow}
    >
      <svg
+        aria-hidden="true"
        width="18"
        height="18"
        viewBox="0 0 24 24"
@@ -216,15 +231,16 @@
      aria-label="Statistics"
      use:pressable
      class="flex h-11 w-11 items-center justify-center rounded-full
-             border border-[#222] text-[#383838]
+             border border-[#222] text-[#8a8a8a]
             transition-colors duration-200
-             hover:border-[#333] hover:text-[#666]"
+             hover:border-[#333] hover:text-[#aaa]"
      onclick={() => {
        invoke("set_view", { view: "stats" });
        currentView.set("stats");
      }}
    >
      <svg
+        aria-hidden="true"
        width="17"
        height="17"
        viewBox="0 0 24 24"
@@ -247,12 +263,13 @@
      aria-label="Settings"
      use:pressable
      class="flex h-11 w-11 items-center justify-center rounded-full
-             border border-[#222] text-[#383838]
+             border border-[#222] text-[#8a8a8a]
             transition-colors duration-200
-             hover:border-[#333] hover:text-[#666]"
+             hover:border-[#333] hover:text-[#aaa]"
      onclick={openSettings}
    >
      <svg
+        aria-hidden="true"
        width="17"
        height="17"
        viewBox="0 0 24 24"
--- a/src/lib/components/FontSelector.svelte
+++ b/src/lib/components/FontSelector.svelte
@@ -52,13 +52,15 @@
  <div class="flex items-center justify-between">
    <div>
      <div class="text-[13px] text-white">Countdown font</div>
-      <div class="text-[11px] text-[#555]">
+      <div class="text-[11px] text-[#8a8a8a]">
        {value || "System default"}
      </div>
    </div>
    <button
      type="button"
-      class="rounded-lg border border-[#1a1a1a] bg-black px-3 py-1.5 text-[12px] text-[#666]
+      aria-expanded={expanded}
+      aria-label={expanded ? "Close font browser" : "Browse fonts"}
+      class="rounded-lg border border-[#1a1a1a] bg-black px-3 py-1.5 text-[12px] text-[#8a8a8a]
             transition-colors hover:border-[#333] hover:text-white"
      onclick={() => { expanded = !expanded; }}
    >
@@ -75,6 +77,8 @@
      {#each fonts as font}
        <button
          type="button"
+          aria-label="Select font: {font.label}"
+          aria-pressed={value === font.family}
          class="flex flex-col items-center gap-1.5 rounded-xl border p-3
                 transition-all duration-150
                 {value === font.family
@@ -88,7 +92,7 @@
          >
            25:00
          </span>
-          <span class="text-[9px] tracking-wider text-[#555] uppercase">
+          <span class="text-[9px] tracking-wider text-[#8a8a8a] uppercase">
            {font.label}
          </span>
        </button>
--- a/src/lib/components/MiniTimer.svelte
+++ b/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"
--- a/src/lib/components/Settings.svelte
+++ b/src/lib/components/Settings.svelte
@@ -99,10 +99,11 @@
      aria-label="Back to dashboard"
      use:pressable
      class="mr-3 flex h-8 w-8 items-center justify-center rounded-full
-             text-[#444] transition-colors hover:text-white"
+             text-[#8a8a8a] transition-colors hover:text-white"
      onclick={goBack}
    >
      <svg
+        aria-hidden="true"
        width="16"
        height="16"
        viewBox="0 0 24 24"
@@ -117,6 +118,7 @@
    </button>
    <h1
      data-tauri-drag-region
+      tabindex="-1"
      class="flex-1 text-lg font-medium text-white"
    >
      Settings
@@ -132,7 +134,7 @@
    <!-- Timer -->
    <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0 }}>
      <h3
-        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
      >
        Timer
      </h3>
@@ -140,12 +142,13 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Break frequency</div>
-          <div class="text-[11px] text-[#777]">
+          <div class="text-[11px] text-[#8a8a8a]">
            Every {$config.break_frequency} min
          </div>
        </div>
        <Stepper
          bind:value={$config.break_frequency}
+          label="Break frequency"
          min={5}
          max={120}
          onchange={markChanged}
@@ -157,12 +160,13 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Break duration</div>
-          <div class="text-[11px] text-[#777]">
+          <div class="text-[11px] text-[#8a8a8a]">
            {$config.break_duration} min
          </div>
        </div>
        <Stepper
          bind:value={$config.break_duration}
+          label="Break duration"
          min={1}
          max={60}
          onchange={markChanged}
@@ -174,10 +178,11 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Auto-start</div>
-          <div class="text-[11px] text-[#777]">Start timer on launch</div>
+          <div class="text-[11px] text-[#8a8a8a]">Start timer on launch</div>
        </div>
        <ToggleSwitch
          bind:checked={$config.auto_start}
+          label="Auto-start"
          onchange={markChanged}
        />
      </div>
@@ -186,7 +191,7 @@
    <!-- Break Screen -->
    <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.06 }}>
      <h3
-        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
      >
        Break Screen
      </h3>
@@ -230,12 +235,13 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Fullscreen break</div>
-          <div class="text-[11px] text-[#777]">
+          <div class="text-[11px] text-[#8a8a8a]">
            {$config.fullscreen_mode ? "Fills entire screen" : "Centered modal"}
          </div>
        </div>
        <ToggleSwitch
          bind:checked={$config.fullscreen_mode}
+          label="Fullscreen break"
          onchange={markChanged}
        />
      </div>
@@ -245,12 +251,13 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Activity suggestions</div>
-          <div class="text-[11px] text-[#777]">
+          <div class="text-[11px] text-[#8a8a8a]">
            Exercise ideas during breaks
          </div>
        </div>
        <ToggleSwitch
          bind:checked={$config.show_break_activities}
+          label="Activity suggestions"
          onchange={markChanged}
        />
      </div>
@@ -259,7 +266,7 @@
    <!-- Behavior -->
    <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.12 }}>
      <h3
-        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
      >
        Behavior
      </h3>
@@ -267,12 +274,13 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Strict mode</div>
-          <div class="text-[11px] text-[#777]">
+          <div class="text-[11px] text-[#8a8a8a]">
            Disable skip and snooze
          </div>
        </div>
        <ToggleSwitch
          bind:checked={$config.strict_mode}
+          label="Strict mode"
          onchange={markChanged}
        />
      </div>
@@ -283,10 +291,11 @@
        <div class="flex items-center">
          <div class="flex-1">
            <div class="text-[13px] text-white">Allow end early</div>
-            <div class="text-[11px] text-[#777]">After 50% of break</div>
+            <div class="text-[11px] text-[#8a8a8a]">After 50% of break</div>
          </div>
          <ToggleSwitch
            bind:checked={$config.allow_end_early}
+            label="Allow end early"
            onchange={markChanged}
          />
        </div>
@@ -296,12 +305,13 @@
        <div class="flex items-center">
          <div class="flex-1">
            <div class="text-[13px] text-white">Snooze duration</div>
-            <div class="text-[11px] text-[#777]">
+            <div class="text-[11px] text-[#8a8a8a]">
              {$config.snooze_duration} min
            </div>
          </div>
          <Stepper
            bind:value={$config.snooze_duration}
+            label="Snooze duration"
            min={1}
            max={30}
            onchange={markChanged}
@@ -313,7 +323,7 @@
        <div class="flex items-center">
          <div class="flex-1">
            <div class="text-[13px] text-white">Snooze limit</div>
-            <div class="text-[11px] text-[#777]">
+            <div class="text-[11px] text-[#8a8a8a]">
              {$config.snooze_limit === 0
                ? "Unlimited"
                : `${$config.snooze_limit} per break`}
@@ -321,6 +331,7 @@
          </div>
          <Stepper
            bind:value={$config.snooze_limit}
+            label="Snooze limit"
            min={0}
            max={5}
            formatValue={(v) => (v === 0 ? "\u221E" : String(v))}
@@ -334,12 +345,13 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Immediate breaks</div>
-          <div class="text-[11px] text-[#777]">
+          <div class="text-[11px] text-[#8a8a8a]">
            Skip pre-break warning
          </div>
        </div>
        <ToggleSwitch
          bind:checked={$config.immediately_start_breaks}
+          label="Immediate breaks"
          onchange={markChanged}
        />
      </div>
@@ -350,12 +362,13 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Working hours</div>
-          <div class="text-[11px] text-[#777]">
+          <div class="text-[11px] text-[#8a8a8a]">
            Only show breaks during your configured work schedule
          </div>
        </div>
        <ToggleSwitch
          bind:checked={$config.working_hours_enabled}
+          label="Working hours"
          onchange={markChanged}
        />
      </div>
@@ -370,6 +383,7 @@
            <div class="flex items-center gap-3 mb-3">
              <ToggleSwitch
                bind:checked={$config.working_hours_schedule[dayIndex].enabled}
+                label={dayName}
                onchange={markChanged}
              />
              <span class="text-[13px] text-white w-20">{dayName}</span>
@@ -448,7 +462,7 @@
    <!-- Idle Detection -->
    <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.21 }}>
      <h3
-        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
      >
        Idle Detection
      </h3>
@@ -456,10 +470,11 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Auto-pause when idle</div>
-          <div class="text-[11px] text-[#777]">Pause timer when away</div>
+          <div class="text-[11px] text-[#8a8a8a]">Pause timer when away</div>
        </div>
        <ToggleSwitch
          bind:checked={$config.idle_detection_enabled}
+          label="Auto-pause when idle"
          onchange={markChanged}
        />
      </div>
@@ -470,12 +485,13 @@
        <div class="flex items-center">
          <div class="flex-1">
            <div class="text-[13px] text-white">Idle timeout</div>
-            <div class="text-[11px] text-[#777]">
+            <div class="text-[11px] text-[#8a8a8a]">
              {$config.idle_timeout}s of inactivity
            </div>
          </div>
          <Stepper
            bind:value={$config.idle_timeout}
+            label="Idle timeout"
            min={30}
            max={600}
            step={30}
@@ -489,7 +505,7 @@
    <!-- Smart Breaks -->
    <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.24 }}>
      <h3
-        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
      >
        Smart Breaks
      </h3>
@@ -497,10 +513,11 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Enable smart breaks</div>
-          <div class="text-[11px] text-[#777]">Auto-reset timer when you step away</div>
+          <div class="text-[11px] text-[#8a8a8a]">Auto-reset timer when you step away</div>
        </div>
        <ToggleSwitch
          bind:checked={$config.smart_breaks_enabled}
+          label="Enable smart breaks"
          onchange={markChanged}
        />
      </div>
@@ -511,7 +528,7 @@
        <div class="flex items-center">
          <div class="flex-1">
            <div class="text-[13px] text-white">Minimum away time</div>
-            <div class="text-[11px] text-[#777]">
+            <div class="text-[11px] text-[#8a8a8a]">
              {$config.smart_break_threshold >= 60
                ? `${Math.floor($config.smart_break_threshold / 60)} min`
                : `${$config.smart_break_threshold}s`} to count as break
@@ -519,6 +536,7 @@
          </div>
          <Stepper
            bind:value={$config.smart_break_threshold}
+            label="Minimum away time"
            min={120}
            max={900}
            step={60}
@@ -532,10 +550,11 @@
        <div class="flex items-center">
          <div class="flex-1">
            <div class="text-[13px] text-white">Count in statistics</div>
-            <div class="text-[11px] text-[#777]">Track natural breaks in stats</div>
+            <div class="text-[11px] text-[#8a8a8a]">Track natural breaks in stats</div>
          </div>
          <ToggleSwitch
            bind:checked={$config.smart_break_count_stats}
+            label="Count in statistics"
            onchange={markChanged}
          />
        </div>
@@ -545,7 +564,7 @@
    <!-- Notifications -->
    <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.27 }}>
      <h3
-        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
      >
        Notifications
      </h3>
@@ -553,10 +572,11 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Pre-break alert</div>
-          <div class="text-[11px] text-[#777]">Warn before breaks</div>
+          <div class="text-[11px] text-[#8a8a8a]">Warn before breaks</div>
        </div>
        <ToggleSwitch
          bind:checked={$config.notification_enabled}
+          label="Pre-break alert"
          onchange={markChanged}
        />
      </div>
@@ -567,12 +587,13 @@
        <div class="flex items-center">
          <div class="flex-1">
            <div class="text-[13px] text-white">Alert timing</div>
-            <div class="text-[11px] text-[#777]">
+            <div class="text-[11px] text-[#8a8a8a]">
              {$config.notification_before_break}s before
            </div>
          </div>
          <Stepper
            bind:value={$config.notification_before_break}
+            label="Alert timing"
            min={0}
            max={300}
            step={10}
@@ -585,7 +606,7 @@
    <!-- Sound -->
    <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.27 }}>
      <h3
-        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
      >
        Sound
      </h3>
@@ -593,10 +614,11 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Sound effects</div>
-          <div class="text-[11px] text-[#777]">Play sounds on break events</div>
+          <div class="text-[11px] text-[#8a8a8a]">Play sounds on break events</div>
        </div>
        <ToggleSwitch
          bind:checked={$config.sound_enabled}
+          label="Sound effects"
          onchange={markChanged}
        />
      </div>
@@ -607,10 +629,11 @@
        <div class="flex items-center">
          <div class="flex-1">
            <div class="text-[13px] text-white">Volume</div>
-            <div class="text-[11px] text-[#777]">{$config.sound_volume}%</div>
+            <div class="text-[11px] text-[#8a8a8a]">{$config.sound_volume}%</div>
          </div>
          <Stepper
            bind:value={$config.sound_volume}
+            label="Volume"
            min={0}
            max={100}
            step={10}
@@ -649,7 +672,7 @@
    <!-- Appearance -->
    <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.3 }}>
      <h3
-        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
      >
        Appearance
      </h3>
@@ -657,12 +680,13 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">UI zoom</div>
-          <div class="text-[11px] text-[#777]">
+          <div class="text-[11px] text-[#8a8a8a]">
            {$config.ui_zoom}%
          </div>
        </div>
        <Stepper
          bind:value={$config.ui_zoom}
+          label="UI zoom"
          min={50}
          max={200}
          step={5}
@@ -705,12 +729,13 @@
      <div class="flex items-center">
        <div class="flex-1">
          <div class="text-[13px] text-white">Animated background</div>
-          <div class="text-[11px] text-[#777]">
+          <div class="text-[11px] text-[#8a8a8a]">
            Gradient blobs with film grain
          </div>
        </div>
        <ToggleSwitch
          bind:checked={$config.background_blobs_enabled}
+          label="Animated background"
          onchange={markChanged}
        />
      </div>
@@ -719,7 +744,7 @@
    <!-- Mini Mode -->
    <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.33 }}>
      <h3
-        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
      >
        Mini Mode
      </h3>
@@ -727,12 +752,13 @@
      <div class="flex items-center justify-between">
        <div>
          <div class="text-[13px] text-white">Click-through</div>
-          <div class="text-[11px] text-[#555]">
+          <div class="text-[11px] text-[#8a8a8a]">
            Mini timer ignores clicks until you hover over it
          </div>
        </div>
        <ToggleSwitch
          bind:checked={$config.mini_click_through}
+          label="Click-through"
          onchange={markChanged}
        />
      </div>
@@ -741,12 +767,13 @@
        <div class="mt-4 flex items-center justify-between">
          <div>
            <div class="text-[13px] text-white">Hover delay</div>
-            <div class="text-[11px] text-[#555]">
+            <div class="text-[11px] text-[#8a8a8a]">
              Seconds to hover before it becomes draggable
            </div>
          </div>
          <Stepper
            bind:value={$config.mini_hover_threshold}
+            label="Hover delay"
            min={1}
            max={10}
            step={0.5}
@@ -760,7 +787,7 @@
    <!-- Shortcuts -->
    <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.36 }}>
      <h3
-        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+        class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
      >
        Keyboard Shortcuts
      </h3>
@@ -768,15 +795,15 @@
      <div class="space-y-3">
        <div class="flex items-center justify-between">
          <span class="text-[13px] text-white">Pause / Resume</span>
-          <kbd class="rounded-lg bg-[#161616] px-2.5 py-1 text-[11px] text-[#666]">Ctrl+Shift+P</kbd>
+          <kbd class="rounded-lg bg-[#161616] px-2.5 py-1 text-[11px] text-[#8a8a8a]">Ctrl+Shift+P</kbd>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-[13px] text-white">Start break now</span>
-          <kbd class="rounded-lg bg-[#161616] px-2.5 py-1 text-[11px] text-[#666]">Ctrl+Shift+B</kbd>
+          <kbd class="rounded-lg bg-[#161616] px-2.5 py-1 text-[11px] text-[#8a8a8a]">Ctrl+Shift+B</kbd>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-[13px] text-white">Show / Hide window</span>
-          <kbd class="rounded-lg bg-[#161616] px-2.5 py-1 text-[11px] text-[#666]">Ctrl+Shift+S</kbd>
+          <kbd class="rounded-lg bg-[#161616] px-2.5 py-1 text-[11px] text-[#8a8a8a]">Ctrl+Shift+S</kbd>
        </div>
      </div>
    </section>
--- a/src/lib/components/StatsView.svelte
+++ b/src/lib/components/StatsView.svelte
@@ -109,7 +109,7 @@
      }

      // Day label
-      ctx.fillStyle = "#444";
+      ctx.fillStyle = "#8a8a8a";
      ctx.font = "10px -apple-system, sans-serif";
      ctx.textAlign = "center";
      const label = day.date.slice(5); // "MM-DD"
@@ -117,6 +117,14 @@
    });
  }

+  // Accessible chart summary
+  const chartAriaLabel = $derived(() => {
+    if (history.length === 0) return "No break history data available";
+    const total = history.reduce((sum, d) => sum + d.breaksCompleted, 0);
+    const skipped = history.reduce((sum, d) => sum + d.breaksSkipped, 0);
+    return `Weekly break chart: ${total} completed and ${skipped} skipped over ${history.length} days`;
+  });
+
  function roundedRect(
    ctx: CanvasRenderingContext2D,
    x: number,
@@ -149,10 +157,11 @@
      aria-label="Back to dashboard"
      use:pressable
      class="mr-3 flex h-8 w-8 items-center justify-center rounded-full
-             text-[#444] transition-colors hover:text-white"
+             text-[#8a8a8a] transition-colors hover:text-white"
      onclick={goBack}
    >
      <svg
+        aria-hidden="true"
        width="16"
        height="16"
        viewBox="0 0 24 24"
@@ -167,6 +176,7 @@
    </button>
    <h1
      data-tauri-drag-region
+      tabindex="-1"
      class="flex-1 text-lg font-medium text-white"
    >
      Statistics
@@ -179,7 +189,7 @@
      <!-- Today's summary -->
      <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0 }}>
        <h3
-          class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+          class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
        >
          Today
        </h3>
@@ -189,7 +199,7 @@
            <div class="text-[28px] font-semibold text-white tabular-nums">
              {stats?.todayCompleted ?? 0}
            </div>
-            <div class="text-[11px] text-[#777]">Breaks taken</div>
+            <div class="text-[11px] text-[#8a8a8a]">Breaks taken</div>
          </div>
          <div class="text-center">
            <div class="text-[28px] font-semibold tabular-nums"
@@ -197,19 +207,19 @@
            >
              {compliancePercent}%
            </div>
-            <div class="text-[11px] text-[#777]">Compliance</div>
+            <div class="text-[11px] text-[#8a8a8a]">Compliance</div>
          </div>
          <div class="text-center">
            <div class="text-[28px] font-semibold text-white tabular-nums">
              {breakTimeFormatted()}
            </div>
-            <div class="text-[11px] text-[#777]">Break time</div>
+            <div class="text-[11px] text-[#8a8a8a]">Break time</div>
          </div>
          <div class="text-center">
            <div class="text-[28px] font-semibold text-white tabular-nums">
              {stats?.todaySkipped ?? 0}
            </div>
-            <div class="text-[11px] text-[#777]">Skipped</div>
+            <div class="text-[11px] text-[#8a8a8a]">Skipped</div>
          </div>
        </div>
      </section>
@@ -217,7 +227,7 @@
      <!-- Streak -->
      <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.06 }}>
        <h3
-          class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+          class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
        >
          Streak
        </h3>
@@ -225,7 +235,7 @@
        <div class="flex items-center justify-between">
          <div>
            <div class="text-[13px] text-white">Current streak</div>
-            <div class="text-[11px] text-[#777]">Consecutive days with breaks</div>
+            <div class="text-[11px] text-[#8a8a8a]">Consecutive days with breaks</div>
          </div>
          <div class="text-[24px] font-semibold tabular-nums" style="color: {$config.accent_color}">
            {stats?.currentStreak ?? 0}
@@ -237,7 +247,7 @@
        <div class="flex items-center justify-between">
          <div>
            <div class="text-[13px] text-white">Best streak</div>
-            <div class="text-[11px] text-[#777]">All-time record</div>
+            <div class="text-[11px] text-[#8a8a8a]">All-time record</div>
          </div>
          <div class="text-[24px] font-semibold text-white tabular-nums">
            {stats?.bestStreak ?? 0}
@@ -248,17 +258,39 @@
      <!-- Weekly chart -->
      <section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.12 }}>
        <h3
-          class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
+          class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#8a8a8a] uppercase"
        >
          Last 7 Days
        </h3>

+        <!-- svelte-ignore a11y_no_interactive_element_to_noninteractive_role -->
        <canvas
          bind:this={chartCanvas}
          class="h-[140px] w-full"
+          role="img"
+          aria-label={chartAriaLabel()}
        ></canvas>

-        <div class="mt-3 flex items-center justify-center gap-4 text-[10px] text-[#777]">
+        <!-- Screen-reader accessible data table for the chart -->
+        {#if history.length > 0}
+          <table class="sr-only">
+            <caption>Break history for the last {history.length} days</caption>
+            <thead>
+              <tr><th>Date</th><th>Completed</th><th>Skipped</th></tr>
+            </thead>
+            <tbody>
+              {#each history as day}
+                <tr>
+                  <td>{day.date}</td>
+                  <td>{day.breaksCompleted}</td>
+                  <td>{day.breaksSkipped}</td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        {/if}
+
+        <div class="mt-3 flex items-center justify-center gap-4 text-[10px] text-[#8a8a8a]">
          <div class="flex items-center gap-1.5">
            <div class="h-2 w-2 rounded-sm" style="background: {$config.accent_color}"></div>
            Completed
--- a/src/lib/components/Stepper.svelte
+++ b/src/lib/components/Stepper.svelte
@@ -6,6 +6,7 @@
    step?: number;
    formatValue?: (v: number) => string;
    onchange?: (value: number) => void;
+    label?: string;
  }

  let {
@@ -15,6 +16,7 @@
    step = 1,
    formatValue = (v: number) => String(v),
    onchange,
+    label = "Value",
  }: Props = $props();

  let holdTimer: ReturnType<typeof setTimeout> | null = null;
@@ -55,32 +57,36 @@
  }
 </script>

-<div class="flex items-center gap-1.5">
+<div class="flex items-center gap-1.5" role="group" aria-label={label}>
  <button
    type="button"
+    aria-label="Decrease"
    class="flex h-7 w-7 items-center justify-center rounded-lg
-           bg-[#141414] text-[#444] transition-colors
+           bg-[#141414] text-[#999] transition-colors
           hover:bg-[#1c1c1c] hover:text-white
           disabled:opacity-20"
    onmousedown={() => startHold(decrement)}
    onmouseup={stopHold}
    onmouseleave={stopHold}
+    onclick={(e) => { if (e.detail === 0) decrement(); }}
    disabled={value <= min}
  >
    &minus;
  </button>
-  <span class="min-w-[38px] text-center text-[13px] tabular-nums text-white">
+  <span class="min-w-[38px] text-center text-[13px] tabular-nums text-white" aria-live="polite" aria-atomic="true">
    {formatValue(value)}
  </span>
  <button
    type="button"
+    aria-label="Increase"
    class="flex h-7 w-7 items-center justify-center rounded-lg
-           bg-[#141414] text-[#444] transition-colors
+           bg-[#141414] text-[#999] transition-colors
           hover:bg-[#1c1c1c] hover:text-white
           disabled:opacity-20"
    onmousedown={() => startHold(increment)}
    onmouseup={stopHold}
    onmouseleave={stopHold}
+    onclick={(e) => { if (e.detail === 0) increment(); }}
    disabled={value >= max}
  >
    +
--- a/src/lib/components/TimeSpinner.svelte
+++ b/src/lib/components/TimeSpinner.svelte
@@ -247,6 +247,31 @@
  function format(n: number): string {
    return String(n).padStart(2, "0");
  }
+
+  // Keyboard handlers for arrow key operation
+  function handleHoursKeydown(e: KeyboardEvent) {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      displayHours = wrapValue(displayHours + 1, 24);
+      emitValue(displayHours, displayMinutes);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      displayHours = wrapValue(displayHours - 1, 24);
+      emitValue(displayHours, displayMinutes);
+    }
+  }
+
+  function handleMinutesKeydown(e: KeyboardEvent) {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      displayMinutes = wrapValue(displayMinutes + 1, 60);
+      emitValue(displayHours, displayMinutes);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      displayMinutes = wrapValue(displayMinutes - 1, 60);
+      emitValue(displayHours, displayMinutes);
+    }
+  }
 </script>

 <div class="time-spinner" style="font-family: {countdownFont ? `'${countdownFont}', monospace` : 'monospace'};">
@@ -265,6 +290,7 @@
    onpointermove={handleHoursPointerMove}
    onpointerup={handleHoursPointerUp}
    onpointercancel={handleHoursPointerUp}
+    onkeydown={handleHoursKeydown}
  >
    <div class="wheel-viewport">
      <div class="wheel-cylinder">
@@ -300,6 +326,7 @@
    onpointermove={handleMinutesPointerMove}
    onpointerup={handleMinutesPointerUp}
    onpointercancel={handleMinutesPointerUp}
+    onkeydown={handleMinutesKeydown}
  >
    <div class="wheel-viewport">
      <div class="wheel-cylinder">
--- a/src/lib/components/TimerRing.svelte
+++ b/src/lib/components/TimerRing.svelte
@@ -4,6 +4,8 @@
    size?: number;
    strokeWidth?: number;
    accentColor?: string;
+    label?: string;
+    valueText?: string;
    children?: import("svelte").Snippet;
  }

@@ -12,6 +14,8 @@
    size = 280,
    strokeWidth = 8,
    accentColor = "#ff4d00",
+    label = "Timer",
+    valueText = "",
    children,
  }: Props = $props();

@@ -44,9 +48,16 @@
 <div
  class="relative flex items-center justify-center"
  style="width: {size}px; height: {size}px;"
+  role="progressbar"
+  aria-valuemin={0}
+  aria-valuemax={100}
+  aria-valuenow={Math.round(progress * 100)}
+  aria-label={label}
+  aria-valuetext={valueText}
 >
  <!-- Glow SVG — drawn larger than the container so blur isn't clipped -->
  <svg
+    aria-hidden="true"
    width={viewSize}
    height={viewSize}
    class="pointer-events-none absolute"
@@ -136,6 +147,7 @@

  <!-- Non-glow SVG — exact size, draws the track + crisp ring -->
  <svg
+    aria-hidden="true"
    width={size}
    height={size}
    class="absolute"
--- a/src/lib/components/Titlebar.svelte
+++ b/src/lib/components/Titlebar.svelte
@@ -9,8 +9,9 @@
  data-tauri-drag-region
  class="group absolute top-0 left-0 right-0 z-50 flex h-10 items-center justify-end pr-3.5 select-none"
 >
-  <!-- Centered app name -->
+  <!-- Centered app name (decorative — OS window title handles screen readers) -->
  <span
+    aria-hidden="true"
    class="pointer-events-none absolute inset-0 flex items-center justify-center
           text-[11px] font-semibold tracking-[0.3em] text-[#383838] uppercase"
    style="font-family: 'Space Mono', monospace;"
@@ -19,7 +20,7 @@
  </span>

  <!-- Traffic light buttons (order: maximize, minimize, close → close is rightmost) -->
-  <div class="flex items-center gap-[8px] opacity-10 transition-opacity duration-300 group-hover:opacity-100">
+  <div class="flex items-center gap-[8px] opacity-10 transition-opacity duration-300 group-hover:opacity-100 group-focus-within:opacity-100">
    <!-- Maximize (green) -->
    <button
      aria-label="Maximize"
--- a/src/lib/components/ToggleSwitch.svelte
+++ b/src/lib/components/ToggleSwitch.svelte
@@ -4,9 +4,10 @@
  interface Props {
    checked: boolean;
    onchange?: (value: boolean) => void;
+    label?: string;
  }

-  let { checked = $bindable(), onchange }: Props = $props();
+  let { checked = $bindable(), onchange, label = "Toggle" }: Props = $props();

  function toggle() {
    checked = !checked;
@@ -17,10 +18,10 @@
 <button
  type="button"
  role="switch"
-  aria-label="Toggle"
+  aria-label={label}
  aria-checked={checked}
  class="relative inline-flex h-[24px] w-[48px] shrink-0 cursor-pointer rounded-full
-         transition-colors duration-200 ease-in-out focus:outline-none"
+         transition-colors duration-200 ease-in-out"
  style="background: {checked ? $config.accent_color : '#1a1a1a'};"
  onclick={toggle}
 >
--- a/src/lib/utils/animate.ts
+++ b/src/lib/utils/animate.ts
@@ -1,5 +1,15 @@
 import { animate } from "motion";

+// Module-level reduced motion query — shared across all actions
+const reducedMotionQuery =
+  typeof window !== "undefined"
+    ? window.matchMedia("(prefers-reduced-motion: reduce)")
+    : null;
+
+function prefersReducedMotion(): boolean {
+  return reducedMotionQuery?.matches ?? false;
+}
+
 /**
 * Svelte action: fade in + slide up on mount
 */
@@ -7,6 +17,11 @@ export function fadeIn(
  node: HTMLElement,
  options?: { duration?: number; delay?: number; y?: number },
 ) {
+  if (prefersReducedMotion()) {
+    node.style.opacity = "1";
+    return { destroy() {} };
+  }
+
  const { duration = 0.5, delay = 0, y = 15 } = options ?? {};
  node.style.opacity = "0";

@@ -30,6 +45,11 @@ export function scaleIn(
  node: HTMLElement,
  options?: { duration?: number; delay?: number },
 ) {
+  if (prefersReducedMotion()) {
+    node.style.opacity = "1";
+    return { destroy() {} };
+  }
+
  const { duration = 0.6, delay = 0 } = options ?? {};
  node.style.opacity = "0";

@@ -53,6 +73,11 @@ export function inView(
  node: HTMLElement,
  options?: { delay?: number; y?: number; threshold?: number },
 ) {
+  if (prefersReducedMotion()) {
+    node.style.opacity = "1";
+    return { destroy() {} };
+  }
+
  const { delay = 0, y = 20, threshold = 0.05 } = options ?? {};
  node.style.opacity = "0";
  node.style.transform = `translateY(${y}px)`;
@@ -90,6 +115,10 @@ export function inView(
 * Svelte action: spring-scale press feedback on buttons
 */
 export function pressable(node: HTMLElement) {
+  if (prefersReducedMotion()) {
+    return { destroy() {} };
+  }
+
  let active: ReturnType<typeof animate> | null = null;

  function onDown() {
@@ -137,6 +166,10 @@ export function glowHover(
  node: HTMLElement,
  options?: { color?: string },
 ) {
+  if (prefersReducedMotion()) {
+    return { update() {}, destroy() {} };
+  }
+
  let color = options?.color ?? "#ff4d00";
  let enterAnim: ReturnType<typeof animate> | null = null;
  let leaveAnim: ReturnType<typeof animate> | null = null;
@@ -191,6 +224,11 @@ export function glowHover(
 * container itself (which would break overflow clipping).
 */
 export function dragScroll(node: HTMLElement) {
+  if (prefersReducedMotion()) {
+    // Allow normal scrolling without the momentum/elastic physics
+    return { destroy() {} };
+  }
+
  const content = node.children[0] as HTMLElement | null;

  let isDown = false;
Author	SHA1	Message	Date
Your Name	460bf2c613	Bump version to 0.1.2	2026-02-07 12:16:03 +02:00
Your Name	4cbf4c5bb8	Add WCAG 2.1 Level AA accessibility across all components A break timer designed to prevent RSI should be usable by people who already live with disabilities. This overhaul adds comprehensive accessibility without changing the visual design. Changes across 17 source files: - Global focus-visible outlines, sr-only utility, forced-colors support - prefers-reduced-motion kills all CSS animations AND JS Web Animations - All text upgraded to 4.5:1+ contrast ratio (WCAG AA) - Keyboard navigation for ColorPicker, Stepper, TimeSpinner - Screen reader: aria-live status regions, progressbar roles, labeled controls, sr-only chart data table, focus management on view changes - Focus trap on break screen, aria-hidden on decorative elements - Descriptive labels on all 25+ toggle/stepper instances in Settings - README updated with accessibility section and WCAG badge	2026-02-07 12:13:03 +02:00
lashman	d5ad1514d1	Update README.md	2026-02-07 09:35:24 +00:00
lashman	925a7d5516	Update README.md	2026-02-07 09:34:36 +00:00
Your Name	87ab035c68	Update README - fix download links, activity count, and accuracy - Fix download links to point to Gitea releases page (not GitHub-style relative URLs) - Correct activity count from 70 to 72 - Enlarge break screen screenshot - Add missing IPC entries (natural-break-detected event, cursor/window commands) - Add msvc_compat.rs to backend modules table - Update winapi description to include WebView2 check dialog - Remove unused dirs crate from dependencies	2026-02-07 11:24:16 +02:00