diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts index e2acc7d..00a1b15 100644 --- a/src/renderer-streamers.ts +++ b/src/renderer-streamers.ts @@ -465,6 +465,14 @@ function renderStreamers(): void { item.className = 'streamer-item' + (currentStreamer === streamer ? ' active' : ''); item.setAttribute('draggable', 'true'); item.dataset.streamerName = streamer; + // Keyboard a11y for the row itself — click selects the streamer. + // Each chip inside still gets its own focus + Enter/Space wiring + // and stops propagation, so tabbing through a row lands on row + // first, then AUTO / VOD / REC / remove in order. + item.setAttribute('role', 'button'); + item.setAttribute('tabindex', '0'); + item.setAttribute('aria-label', streamer); + if (currentStreamer === streamer) item.setAttribute('aria-current', 'true'); // Live-dot — red pulsing dot when this streamer is currently // broadcasting on Twitch. Populated from the live-status batch @@ -573,6 +581,16 @@ function renderStreamers(): void { if (draggedStreamerName === streamer) return; void selectStreamer(streamer); }); + item.addEventListener('keydown', (e) => { + // Activate row on Enter / Space when the row itself (not a + // chip child) is focused. The chips already preventDefault + // + stopPropagation on their own keydowns so they won't reach + // this handler. + if (e.key !== 'Enter' && e.key !== ' ') return; + if (e.target !== item) return; + e.preventDefault(); + void selectStreamer(streamer); + }); list.appendChild(item); }); diff --git a/src/styles.css b/src/styles.css index f76d775..12f5913 100644 --- a/src/styles.css +++ b/src/styles.css @@ -130,6 +130,11 @@ body { color: var(--text); } +.streamer-item:focus-visible { + outline: none; + box-shadow: inset 0 0 0 2px rgba(145, 70, 255, 0.55); +} + .streamer-item.active { background: linear-gradient(90deg, rgba(145, 71, 255, 0.28) 0%, rgba(145, 71, 255, 0.08) 100%); color: var(--text);