From 7260b36534c2f8e583ec9698a96fcc8b21c6908c Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Thu, 19 Mar 2026 18:57:21 +0000
Subject: [PATCH] fix: live page mobile VCR, LCD aria, feed keyboard (closes
 #15, #55, #56)

---
 public/live.css |  9 +++++----
 public/live.js  | 12 +++++++++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/public/live.css b/public/live.css
index 126950b1..7cab3310 100644
--- a/public/live.css
+++ b/public/live.css
@@ -597,10 +597,11 @@
 
 /* Mobile VCR */
 @media (max-width: 600px) {
-  .vcr-bar { padding: 4px 8px; }
-  .vcr-controls { gap: 4px; }
-  .vcr-btn { padding: 3px 6px; font-size: 0.7rem; }
-  .vcr-scope-btn { font-size: 0.6rem; padding: 1px 4px; }
+  .vcr-bar { padding: 4px 8px; flex-wrap: wrap; }
+  .vcr-controls { gap: 4px; flex-wrap: wrap; width: 100%; justify-content: center; }
+  .vcr-timeline-wrap { width: 100%; }
+  .vcr-btn { padding: 10px 14px; font-size: 0.8rem; min-height: 44px; min-width: 44px; }
+  .vcr-scope-btn { font-size: 0.75rem; padding: 10px 12px; min-height: 44px; min-width: 44px; }
 }
 
 /* Timeline time tooltip */
diff --git a/public/live.js b/public/live.js
index c4293a76..07c7c1e8 100644
--- a/public/live.js
+++ b/public/live.js
@@ -269,6 +269,7 @@
   function drawLcdText(text, color) {
     const canvas = document.getElementById('vcrLcdCanvas');
     if (!canvas) return;
+    canvas.setAttribute('aria-label', 'VCR time: ' + text);
     const ctx = canvas.getContext('2d');
     const dpr = window.devicePixelRatio || 1;
     const cw = canvas.offsetWidth, ch = canvas.offsetHeight;
@@ -585,7 +586,7 @@
           </div>
           <div class="vcr-lcd">
             <div class="vcr-lcd-row vcr-lcd-mode" id="vcrLcdMode">LIVE</div>
-            <canvas id="vcrLcdCanvas" class="vcr-lcd-canvas" width="200" height="32"></canvas>
+            <canvas id="vcrLcdCanvas" class="vcr-lcd-canvas" width="200" height="32" role="img" aria-label="VCR time display"></canvas>
             <div class="vcr-lcd-row vcr-lcd-pkts" id="vcrLcdPkts"></div>
           </div>
           <div id="vcrPrompt" class="vcr-prompt hidden"></div>
@@ -647,6 +648,13 @@
 
     // Feed show/hide
     const feedEl = document.getElementById('liveFeed');
+    // Keyboard support for feed items (event delegation)
+    feedEl.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        const item = e.target.closest('.live-feed-item');
+        if (item) { e.preventDefault(); item.click(); }
+      }
+    });
     const feedHideBtn = document.getElementById('feedHideBtn');
     const feedShowBtn = document.getElementById('feedShowBtn');
     if (localStorage.getItem('live-feed-hidden') === 'true') {
@@ -1242,6 +1250,8 @@
 
     const item = document.createElement('div');
     item.className = 'live-feed-item live-feed-enter';
+    item.setAttribute('tabindex', '0');
+    item.setAttribute('role', 'button');
     item.style.cursor = 'pointer';
     item.innerHTML = `
       <span class="feed-icon" style="color:${color}">${icon}</span>