diff --git a/src/renderer-locale-de.ts b/src/renderer-locale-de.ts
index 49822d3..b136ebe 100644
--- a/src/renderer-locale-de.ts
+++ b/src/renderer-locale-de.ts
@@ -356,7 +356,8 @@ const UI_TEXT_DE = {
autoRecordScanEmpty: 'Manueller Scan: kein Streamer ist gerade live.',
liveNowTooltip: 'Aktuell live auf Twitch',
modalCloseAria: 'Dialog schliessen',
- sidebarEmpty: 'Noch keine Streamer. Fuege oben rechts einen hinzu.'
+ sidebarEmpty: 'Noch keine Streamer. Fuege oben rechts einen hinzu.',
+ removeAria: 'Entfernen'
},
vods: {
noneTitle: 'Keine VODs',
diff --git a/src/renderer-locale-en.ts b/src/renderer-locale-en.ts
index 7168837..12618fd 100644
--- a/src/renderer-locale-en.ts
+++ b/src/renderer-locale-en.ts
@@ -356,7 +356,8 @@ const UI_TEXT_EN = {
autoRecordScanEmpty: 'Manual scan: no streamers currently live.',
liveNowTooltip: 'Currently live on Twitch',
modalCloseAria: 'Close dialog',
- sidebarEmpty: 'No streamers yet. Add one via the input at the top right.'
+ sidebarEmpty: 'No streamers yet. Add one via the input at the top right.',
+ removeAria: 'Remove'
},
vods: {
noneTitle: 'No VODs',
diff --git a/src/renderer-queue.ts b/src/renderer-queue.ts
index 4f88e8b..f0430ff 100644
--- a/src/renderer-queue.ts
+++ b/src/renderer-queue.ts
@@ -572,7 +572,7 @@ function renderQueue(): void {
${item.status === 'error' ? `` : ''}
- x
+ x
`;
}).join('');
diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts
index 3079c36..c4f6af8 100644
--- a/src/renderer-streamers.ts
+++ b/src/renderer-streamers.ts
@@ -525,10 +525,20 @@ function renderStreamers(): void {
const removeSpan = document.createElement('span');
removeSpan.className = 'remove';
removeSpan.textContent = 'x';
+ removeSpan.setAttribute('role', 'button');
+ removeSpan.setAttribute('tabindex', '0');
+ removeSpan.setAttribute('aria-label', UI_TEXT.streamers.removeAria);
removeSpan.addEventListener('click', (e) => {
e.stopPropagation();
void removeStreamer(streamer);
});
+ removeSpan.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ e.stopPropagation();
+ void removeStreamer(streamer);
+ }
+ });
item.append(nameSpan, autoBtn, vodBtn, recBtn, removeSpan);
item.addEventListener('click', () => {
diff --git a/src/styles.css b/src/styles.css
index 64597a1..e80b146 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -443,10 +443,18 @@ body {
cursor: pointer;
}
-.streamer-item:hover .remove {
+.streamer-item:hover .remove,
+.streamer-item .remove:focus-visible {
opacity: 1;
}
+.streamer-item .remove:focus-visible,
+.queue-item .remove:focus-visible {
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(255, 70, 70, 0.5);
+ border-radius: 3px;
+}
+
/* Live-dot — red pulsing indicator shown next to a streamer's name in
the sidebar when they are currently broadcasting on Twitch. */
.streamer-live-dot {