release: 4.6.50 remove-X buttons keyboard-accessible + aria-labeled

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.49",
+  "version": "4.6.50",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.6.49",
+      "version": "4.6.50",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.49",
+  "version": "4.6.50",
   "description": "Twitch VOD Manager - Download Twitch VODs easily",
   "main": "dist/main.js",
   "author": "xRangerDE",

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',

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',

src/renderer-queue.ts

@@ -572,7 +572,7 @@ function renderQueue(): void {
                     </div>
                 </div>
                 ${item.status === 'error' ? `<button class="queue-retry-btn" title="${escapeHtml(UI_TEXT.queue.retryItem)}" onclick="retryQueueItem('${item.id}')">&#x21bb;</button>` : ''}
-                <span class="remove" onclick="removeFromQueue('${item.id}')">x</span>
+                <span class="remove" role="button" tabindex="0" aria-label="${escapeHtml(UI_TEXT.streamers.removeAria)}" onclick="removeFromQueue('${item.id}')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();removeFromQueue('${item.id}');}">x</span>
             </div>
         `;
     }).join('');

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', () => {

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 {