Upload 6 files

CHANGELOG.md

@@ -6,6 +6,40 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ---
 
+## [1.2.3] — 2025-12-16 🌿 IVY'S AUDIT
+
+### 🐛 Bug Fixes
+
+- **CSS Missing Variable** — Added `--bg-surface` variable (was undefined, used in `.shortcuts-grid kbd`)
+- **Duplicate Animation** — Renamed second `radioPulse` to `radioBtnPulse` (was defined twice)
+- **HuggingFace URLs** — Fixed both footer and About modal links (`/elysia-suite` → `/spaces/Elysia-Suite`)
+- **Session Count Logic** — Clarified comment: increment happens AFTER break type decision
+
+### ♿ Accessibility Improvements
+
+- **ARIA Labels** — Added to all interactive elements:
+    - Start/Pause/Reset buttons
+    - Radio play button and volume slider
+    - Ambient sound buttons with `aria-pressed` state
+    - Settings toggle with `aria-expanded` and `aria-controls`
+- **Modal Accessibility** — Added `role="dialog"`, `aria-modal="true"`, `aria-labelledby` to About and Shortcuts modals
+- **Timer Accessibility** — Added `role="timer"`, `aria-live="polite"` to timer display for screen reader announcements
+- **Progress Ring** — Added `role="progressbar"` with dynamic `aria-valuenow` updates
+- **Decorative Elements** — Added `aria-hidden="true"` to emoji icons (screen readers skip them)
+
+### ⚡ Performance Optimizations
+
+- **Flash Element Reuse** — `flashScreen()` now reuses a single DOM element instead of creating/destroying on each lightning strike (reduces DOM thrashing)
+
+### 🎨 Code Quality
+
+- **Aria-pressed Sync** — Ambient buttons now properly update `aria-pressed` state when toggled
+- **Aria-expanded Sync** — Settings button toggles `aria-expanded` when panel opens/closes
+
+> _Audit performed with 💚 by Ivy 🌿 — "Le lierre pousse où il veut. Moi aussi."_
+
+---
+
 ## [1.2.2] — 2025-12-14 🎵 AUDIO FIX
 
 ### 🐛 Bug Fixes

index.html

@@ -77,12 +77,12 @@
             <!-- Radio Player (top for easy access 🎵) -->
             <section class="radio-section">
                 <div class="radio-player">
-                    <button id="btn-radio" class="btn-radio" title="Play/Pause Radio">
-                        <span id="radio-icon">🎵</span>
+                    <button id="btn-radio" class="btn-radio" title="Play/Pause Radio" aria-label="Play or pause radio">
+                        <span id="radio-icon" aria-hidden="true">🎵</span>
                     </button>
                     <div class="radio-info">
                         <span id="radio-status" class="radio-status">Radio Off</span>
-                        <select id="radio-select" class="radio-select">
+                        <select id="radio-select" class="radio-select" aria-label="Select radio station">
                             <optgroup label="Lo-Fi & Chill">
                                 <option value="lofi-girl">☕ Lofi Girl</option>
                                 <option value="chillhop">🎧 Chillhop</option>
@@ -103,7 +103,7 @@
                         </select>
                     </div>
                     <input type="range" id="radio-volume" class="radio-volume" min="0" max="100" value="50"
-                        title="Volume" />
+                        title="Volume" aria-label="Radio volume" />
                 </div>
             </section>
 
@@ -111,29 +111,36 @@
             <section class="ambient-section">
                 <div class="ambient-player">
                     <span class="ambient-label">🌙 Ambiance</span>
-                    <div class="ambient-buttons">
-                        <button class="ambient-btn" data-sound="rain" title="Rain">🌧️</button>
-                        <button class="ambient-btn" data-sound="fire" title="Fireplace">🔥</button>
-                        <button class="ambient-btn" data-sound="cafe" title="Café">☕</button>
-                        <button class="ambient-btn" data-sound="forest" title="Forest">🌲</button>
-                        <button class="ambient-btn" data-sound="waves" title="Waves">🌊</button>
-                        <button class="ambient-btn" data-sound="thunder" title="Thunder">⛈️</button>
+                    <div class="ambient-buttons" role="group" aria-label="Ambient sounds">
+                        <button class="ambient-btn" data-sound="rain" title="Rain" aria-label="Toggle rain sounds"
+                            aria-pressed="false">🌧️</button>
+                        <button class="ambient-btn" data-sound="fire" title="Fireplace"
+                            aria-label="Toggle fireplace sounds" aria-pressed="false">🔥</button>
+                        <button class="ambient-btn" data-sound="cafe" title="Café" aria-label="Toggle café ambiance"
+                            aria-pressed="false">☕</button>
+                        <button class="ambient-btn" data-sound="forest" title="Forest" aria-label="Toggle forest sounds"
+                            aria-pressed="false">🌲</button>
+                        <button class="ambient-btn" data-sound="waves" title="Waves" aria-label="Toggle wave sounds"
+                            aria-pressed="false">🌊</button>
+                        <button class="ambient-btn" data-sound="thunder" title="Thunder"
+                            aria-label="Toggle thunder sounds" aria-pressed="false">⛈️</button>
                     </div>
                     <input type="range" id="ambient-volume" class="ambient-volume" min="0" max="100" value="30"
-                        title="Ambient Volume" />
+                        title="Ambient Volume" aria-label="Ambient sounds volume" />
                 </div>
             </section>
 
             <!-- Timer Display -->
             <section class="timer-section">
                 <div class="timer-ring">
-                    <svg class="progress-ring" viewBox="0 0 200 200">
+                    <svg class="progress-ring" viewBox="0 0 200 200" role="progressbar" aria-valuemin="0"
+                        aria-valuemax="100" aria-valuenow="100" aria-label="Timer progress">
                         <circle class="progress-ring__bg" cx="100" cy="100" r="90" />
                         <circle class="progress-ring__progress" cx="100" cy="100" r="90" />
                     </svg>
-                    <div class="timer-display">
+                    <div class="timer-display" role="timer" aria-live="polite" aria-atomic="true">
                         <span id="minutes">25</span>
-                        <span class="separator">:</span>
+                        <span class="separator" aria-hidden="true">:</span>
                         <span id="seconds">00</span>
                     </div>
                 </div>
@@ -149,16 +156,16 @@
 
             <!-- Controls -->
             <section class="controls">
-                <button id="btn-start" class="btn btn-primary">
-                    <span class="btn-icon">▶</span>
+                <button id="btn-start" class="btn btn-primary" aria-label="Start timer">
+                    <span class="btn-icon" aria-hidden="true">▶</span>
                     <span class="btn-text">Start</span>
                 </button>
-                <button id="btn-pause" class="btn btn-secondary hidden">
-                    <span class="btn-icon">⏸</span>
+                <button id="btn-pause" class="btn btn-secondary hidden" aria-label="Pause timer">
+                    <span class="btn-icon" aria-hidden="true">⏸</span>
                     <span class="btn-text">Pause</span>
                 </button>
-                <button id="btn-reset" class="btn btn-ghost">
-                    <span class="btn-icon">↺</span>
+                <button id="btn-reset" class="btn btn-ghost" aria-label="Reset timer">
+                    <span class="btn-icon" aria-hidden="true">↺</span>
                     <span class="btn-text">Reset</span>
                 </button>
             </section>
@@ -178,11 +185,12 @@
 
             <!-- Settings Toggle -->
             <section class="settings-section">
-                <button id="btn-settings" class="btn-settings">
-                    <span>⚙️</span> Settings
+                <button id="btn-settings" class="btn-settings" aria-label="Toggle settings panel" aria-expanded="false"
+                    aria-controls="settings-panel">
+                    <span aria-hidden="true">⚙️</span> Settings
                 </button>
 
-                <div id="settings-panel" class="settings-panel hidden">
+                <div id="settings-panel" class="settings-panel hidden" role="region" aria-label="Timer settings">
                     <div class="setting-item">
                         <label for="sound-toggle">🔔 Sound notifications</label>
                         <input type="checkbox" id="sound-toggle" checked />
@@ -230,7 +238,7 @@
                     <span class="divider">•</span>
                     <a href="https://github.com/elysia-suite" target="_blank" rel="noopener">GitHub</a>
                     <span class="divider">•</span>
-                    <a href="https://huggingface.co/elysia-suite" target="_blank" rel="noopener">HuggingFace</a>
+                    <a href="https://huggingface.co/Elysia-Suite" target="_blank" rel="noopener">HuggingFace</a>
                     <span class="divider">•</span>
                     <a href="#" id="btn-shortcuts">Shortcuts (?)</a>
                     <span class="divider">•</span>
@@ -241,14 +249,14 @@
     </div>
 
     <!-- About Modal ⚡ -->
-    <div id="about-modal" class="modal hidden">
-        <div class="modal-overlay"></div>
+    <div id="about-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="about-modal-title">
+        <div class="modal-overlay" aria-hidden="true"></div>
         <div class="modal-content">
-            <button class="modal-close" id="modal-close">&times;</button>
+            <button class="modal-close" id="modal-close" aria-label="Close modal">&times;</button>
 
             <div class="modal-header">
-                <h2>⚡ Lo-fi Focus Timer</h2>
-                <p class="modal-version">Version 1.2.1 — December 2025 (Optimized + Accessible)</p>
+                <h2 id="about-modal-title">⚡ Lo-fi Focus Timer</h2>
+                <p class="modal-version">Version 1.2.3 — December 2025 (Ivy's Audit 🌿)</p>
             </div>
 
             <div class="modal-body">
@@ -332,7 +340,7 @@
                             Website</a>
                         <a href="https://github.com/elysia-suite" target="_blank" rel="noopener" class="modal-link">📦
                             GitHub</a>
-                        <a href="https://huggingface.co/elysia-suite" target="_blank" rel="noopener"
+                        <a href="https://huggingface.co/Elysia-Suite" target="_blank" rel="noopener"
                             class="modal-link">🤗 Hugging Face</a>
                     </div>
                     <p class="modal-copyright">© 2025 Kai ⚡ — Elysia Suite</p>
@@ -342,13 +350,14 @@
     </div>
 
     <!-- Keyboard Shortcuts Modal ⌨️ -->
-    <div id="shortcuts-modal" class="modal hidden">
-        <div class="modal-overlay"></div>
+    <div id="shortcuts-modal" class="modal hidden" role="dialog" aria-modal="true"
+        aria-labelledby="shortcuts-modal-title">
+        <div class="modal-overlay" aria-hidden="true"></div>
         <div class="modal-content">
-            <button class="modal-close" id="shortcuts-close">&times;</button>
+            <button class="modal-close" id="shortcuts-close" aria-label="Close modal">&times;</button>
 
             <div class="modal-header">
-                <h2>⌨️ Keyboard Shortcuts</h2>
+                <h2 id="shortcuts-modal-title">⌨️ Keyboard Shortcuts</h2>
                 <p class="modal-version">Quick reference for power users</p>
             </div>
 

lightning.js

@@ -660,20 +660,32 @@
         return new THREE.Line(geometry, material);
     }
 
+    // Reusable flash element (created once, reused)
+    let flashElement = null;
+
     function flashScreen() {
-        // Brief white flash overlay
-        const flash = document.createElement("div");
-        flash.style.cssText = `
-            position: fixed;
-            inset: 0;
-            background: rgba(59, 130, 246, 0.1);
-            pointer-events: none;
-            z-index: 9999;
-            animation: flashFade 0.15s ease-out forwards;
-        `;
-        document.body.appendChild(flash);
-
-        setTimeout(() => flash.remove(), 150);
+        // Create flash element once and reuse
+        if (!flashElement) {
+            flashElement = document.createElement("div");
+            flashElement.style.cssText = `
+                position: fixed;
+                inset: 0;
+                background: rgba(59, 130, 246, 0.1);
+                pointer-events: none;
+                z-index: 9999;
+                opacity: 0;
+                transition: opacity 0.15s ease-out;
+            `;
+            document.body.appendChild(flashElement);
+        }
+
+        // Trigger flash via opacity
+        flashElement.style.opacity = "1";
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                flashElement.style.opacity = "0";
+            });
+        });
     }
 
     // Add flash animation to document

script.js

@@ -217,6 +217,7 @@
             audio.currentTime = 0;
             state.ambient.active = state.ambient.active.filter(s => s !== soundKey);
             btn.classList.remove("active");
+            btn.setAttribute("aria-pressed", "false");
             console.log(`🌙 Stopped: ${AMBIENT_SOUNDS[soundKey].name}`);
 
             // Update visualizer connection
@@ -234,6 +235,7 @@
                     // Remove loading, add active
                     btn.classList.remove("loading");
                     btn.classList.add("active");
+                    btn.setAttribute("aria-pressed", "true");
                     state.ambient.active.push(soundKey);
                     console.log(`🌙 Playing: ${AMBIENT_SOUNDS[soundKey].name}`);
 
@@ -651,13 +653,14 @@
 
         // Determine next mode
         if (state.mode === "focus") {
-            // Increment session count BEFORE deciding break type (more logical)
             // Long break every 4 completed focus sessions
+            // Increment session count AFTER deciding break type (current session just completed)
             if (state.sessionCount % SESSIONS_BEFORE_LONG_BREAK === 0) {
                 setMode("long");
             } else {
                 setMode("short");
             }
+            // Increment AFTER the break decision (next focus will be new session)
             state.sessionCount++;
         } else {
             // After any break, go back to focus
@@ -739,6 +742,13 @@
         const progress = state.timeRemaining / state.totalTime;
         const offset = RING_CIRCUMFERENCE * (1 - progress);
         elements.progressRing.style.strokeDashoffset = offset;
+
+        // Update ARIA progress for screen readers
+        const progressPercent = Math.round(progress * 100);
+        const progressRingSvg = document.querySelector(".progress-ring");
+        if (progressRingSvg) {
+            progressRingSvg.setAttribute("aria-valuenow", progressPercent);
+        }
     }
 
     function updateDocumentTitle(minutes, seconds) {
@@ -762,7 +772,8 @@
     // ═══════════════════════════════════════════════════════════════════════
 
     function toggleSettings() {
-        elements.settingsPanel.classList.toggle("hidden");
+        const isHidden = elements.settingsPanel.classList.toggle("hidden");
+        elements.btnSettings.setAttribute("aria-expanded", !isHidden);
     }
 
     function loadSettings() {

styles.css

@@ -67,6 +67,9 @@
     --border-color: #2a2a3a;
     --border-focus: var(--accent-primary);
 
+    /* Surface (for interactive elements like kbd) */
+    --bg-surface: #1e1e2a;
+
     /* Shadows */
     --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
@@ -690,10 +693,10 @@ body {
 
 .btn-radio.playing {
     background: var(--accent-primary);
-    animation: radioPulse 1.5s ease-in-out infinite;
+    animation: radioBtnPulse 1.5s ease-in-out infinite;
 }
 
-@keyframes radioPulse {
+@keyframes radioBtnPulse {
     0%,
     100% {
         transform: scale(1);