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 @@
LIVE
- +
@@ -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 = ` ${icon}